老师，这样可以吗
来源：2-8 编程练习
TechnicalTopSales
2019-10-13 03:48:01
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.square{
height:200px;
width:300px;
background:#f00;
position:relative;
}
.square .star1 .starp1{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(0deg) scale(2.5) ;
position:absolute;
top:37.5px;
left:40px;
}
.square .star1 .starp2{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(139.1deg) scale(2.5);
position:absolute;
top:35px;
left:40px;
}
.square .star1 .starp3{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(69deg) scale(2.5);
position:absolute;
top:38.5px;
left:40px;
}
/* 以上为第一颗星*/
.square .star2 .starp1{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(30deg) scale(.9) ;
position:absolute;
top:13px;
left:90px;
}
.square .star2 .starp2{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(169.1deg) scale(.9);
position:absolute;
top:13px;
left:90px;
}
.square .star2 .starp3{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(99deg) scale(.9);
position:absolute;
top:13.5px;
left:90px;
}
/* 以上为第二颗星*/
.square .star3 .starp1{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(60deg) scale(.9) ;
position:absolute;
top:31px;
left:105px;
}
.square .star3 .starp2{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(199.1deg) scale(.9);
position:absolute;
top:31px;
left:105px;
}
.square .star3 .starp3{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(129deg) scale(.9);
position:absolute;
top:31.5px;
left:105px;
}
/* 以上为第三颗星*/
.square .star4 .starp1{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(00deg) scale(.9) ;
position:absolute;
top:53px;
left:105px;
}
.square .star4 .starp2{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(139.1deg) scale(.9);
position:absolute;
top:53px;
left:105px;
}
.square .star4 .starp3{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(69deg) scale(.9);
position:absolute;
top:53.5px;
left:105px;
}
/* 以上为第四颗星*/
.square .star5 .starp1{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(30deg) scale(.9) ;
position:absolute;
top:73px;
left:90px;
}
.square .star5 .starp2{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(169.1deg) scale(.9);
position:absolute;
top:73px;
left:90px;
}
.square .star5 .starp3{
border-top: 8px solid yellow;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform:rotate(99deg) scale(.9);
position:absolute;
top:73.5px;
left:90px;
}
/* 以上为第五颗星*/
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="square">
<div class="star1">
<div class="starp1"></div>
<div class="starp2"></div>
<div class="starp3"></div>
</div>
<div class="star2">
<div class="starp1"></div>
<div class="starp2"></div>
<div class="starp3"></div>
</div>
<div class="star3">
<div class="starp1"></div>
<div class="starp2"></div>
<div class="starp3"></div>
</div>
<div class="star4">
<div class="starp1"></div>
<div class="starp2"></div>
<div class="starp3"></div>
</div>
<div class="star5">
<div class="starp1"></div>
<div class="starp2"></div>
<div class="starp3"></div>
</div>
</div>
</body>
</html>
1回答
-
同学，你好！
效果基本ok。主要是让大家练习属性的运用，看得出来你基本已经掌握。而且现在我们是学习阶段，图形的角度不会要求特别严格，因为是自己调试出来的。在实际开发中，ui会给出设计稿，这些图形类的各种信息（角度，宽高，大小）会标注出来，直接用就行。
如果帮助到了你，欢迎采纳，祝学习愉快！
0
相似问题