老师这样写帅不帅？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五角星</title>
<style>
*{margin: 0;padding: 0;}
section{
width: 300px;
height: 200px;
margin: 50px auto;
background-color: red;
position: relative;
}
.container{
position: relative;
width: 20px;
height: 20px;
}
.start{
width: 0px;
height: 0px;
border-top: 10px solid yellow;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: 5px;
transform: scale(1,0.8);
}
.container::before,
.container::after{
content: "";
display: block;
width: 0px;
height: 0px;
border-top: 10px solid yellow;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: 5px;

}
.container::before{
transform: rotate(66deg) scale(1,0.8);
}
.container::after{
transform: rotate(291deg) scale(1,0.8);
}
.small1{
position: absolute;
transform:translate(90px,15px) rotate(25deg);
}
.small2{
position: absolute;
transform:translate(110px,40px) rotate(-25deg);
}
.small3{
position: absolute;
transform: translate(110px,75px);

}
.small4{
position: absolute;
transform:translate(90px,100px) rotate(25deg);
}
.big{
position: absolute;
transform:translate(40px,60px) scale(3);

}
</style>
</head>
<body>
<section>
<div class="container big">
<div class="start"></div>
</div>
<div class="container small1">
<div class="start"></div>
</div>
<div class="container small2">
<div class="start"></div>
</div>
<div class="container small3">
<div class="start"></div>
</div>
<div class="container small4">
<div class="start"></div>
</div>
</section>
</body>
</html>

慕斯卡5217687 2018-04-19

源自：CSS3转换 2-9 编程练习

收起

3回答

qq_顺其自然_67 2018-07-24 19:36:39

厉害，我很难控制好定位和角度，看着一点也不好看，数学不好

收起回答

一路电光带火花 2018-05-14 10:23:31

使用三角形，然后通过定位和旋转角度的调整，这个的定位是通过计算出来的，如果是旋转角度就需要一点一点的调整了，不是那么精确，实际上用的时候，直接拿来代码就可以了，不用自己算的。

收起回答

李二狗狗狗 #1

这个定位是怎么算出来的？可以说一下吗？我画的五角星不标准。。

2018-07-16 07:02:56

好帮手慕糖 2018-04-19 18:37:45

你好，实现没有问题，继续加油！

祝学习愉快~

收起回答

hy_wang #1

老师我想请问这个角度以及translate量是怎么计算的我半天对不到一起去

2018-05-13 20:20:16
_是你_ 回复 hy_wang #2

上面的老铁已经说了哈 .使用三角形，然后通过定位和旋转角度的调整，这个的定位是通过计算出来的，如果是旋转角度就需要一点一点的调整了，不是那么精确，实际上用的时候，直接拿来代码就可以了，不用自己算的。

2018-07-16 10:38:47