请老师检查
来源：2-13 编程练习
KangarooL
2021-03-16 23:32:30
相关代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
* {
margin: 0;
padding: 0;
}
bodu{
position: relative;
}
.flag {
width: 300px;
height: 200px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -150px;
}
.flag .star {
color: yellow;
}
.flag .star:nth-child(1) {
transform: scale(4) translate(118px,13px);
}
.flag .star:nth-child(2) {
transform: scale(2) rotate(30deg) translate(120px,8px);
}
.flag .star:nth-child(3) {
transform: scale(2) rotate(40deg) translate(134px,12px);
}
.flag .star:nth-child(4) {
transform: scale(2) translate(125px,13px);
}
.flag .star:nth-child(5) {
transform: scale(2) rotate(30deg) translate(126px,29px);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="flag">
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
<div class="star">★</div>
</div>
</body>
</html>
写回答
1回答
-
同学你好，代码中是直接从输入法找了一个五角星符号，比较简单。建议同学使用css绘制一个五角星，目的是灵活的练习css的运用，也能扩展思维哦。思路如下：
1、一个五角星，是由三个叠在一起的三角形组成的。所以掌握一个三角形的绘制，然后绘制三个三角形，通过旋转、位移等方式，让它们组合成五角星。如下图所示：
2、三角形的绘制思路，参考如下例子：
给一个元素设置宽高以及边框，边框比较粗的时候，表现形式为梯形：
当宽高不断减少时 , border会越趋向于三角形 , 如下：
当宽高为0时，border变成了三角 , 如下：
所以把其他角度的边框都设置为透明transparent，留一个角度的边框颜色，就能绘制出来三角形了。
3、一个星星制作好了，其他几个也是同样的制作，只不过小五角星加一个缩放即可哦。
祝学习愉快~
0h021-03-19
