正在回答
相当于拆成三个三角形，然后通过角度和旋转叠加在一起。看看下图，在思考下：
三个颜色代表元素本身和它的:befroe,:after 做的三个三角形，三角形使用border来实现。希望对你有帮助，祝学习愉快，欢迎采纳。
。祝学习愉快！
老师，我做的五角星的位置不知道怎么设置（图1）会溢出，然后如果直接缩放div的话就变形了（图2）转角度也转不回来，要是缩放三个三角形（两个伪元素）就变成图3
<style type="text/css">
.flag {
width: 600px;height: 600px;background: red;
}
.star {
position: relative;height: 0;width: 0;display: block;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(35deg);
-webkit-transform: scale(.3);
}
.star::before {
position: absolute;height: 0;width: 0;display: block;content: "";
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(-70deg);
left: -105px;top: 3px; -webkit-transform: scale(.3);
}
.star::after {
position: absolute;height: 0;width: 0;display: block;content: "";
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
left: -65px;top: -45px; -webkit-transform: scale(.3);
}
</style>
</head>
<body>
<div class="flag">
<div class="star star1"></div>
</div>
</body>
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星