这个思路我不太懂 这个改变形状的是哪个啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.flan{
width: 600px;
height: 400px;
background:red;
position: relative;
margin: 200px auto;
}
.star{
width: 0;height: 0;
border-left: 65px solid transparent;
border-right:65px solid transparent;
border-top:40px solid yellow;
position: absolute;
top: 80px;
left:40px;
}
.star::before,
.star::after{
display: block;
content:"";
width: 0;
height: 0;
border-left: 65px solid transparent;
border-right:65px solid transparent;
border-top:40px solid yellow;
position: absolute;
}
.star::before{
left: -65px;
top: -40px;
transform:rotate(-70deg);
}
.stars::after{
left: -65px;
top: -40px;
transform: rotate(-146deg);
}
.star-2 {
transform: scale(0.3) rotate(20deg);
left: 150px;
top: 20px;
}
.star-3 {
transform: scale(0.3) rotate(40deg);
left: 180px;
top: 70px;
}
.star-4 {
transform: scale(0.3) rotate(60deg);
left: 180px;
top: 120px;
}
.star-5 {
transform: scale(0.3) rotate(80deg);
left: 150px;
top: 170px;
}
</style>
</head>
<body>
<div class="flan">
<div class="star1 star"></div>
<div class="star2 star"></div>
<div class="star3 star"></div>
<div class="star4 star"></div>
<div class="star5 star"></div>
</div>
</body>
</html>
正在回答
同学你好， 请问是对如何实现三角形不太懂吗？如果是这样的话，那么可以参考如下解释：
当一个盒子宽高为0，只设置边框的时候，会发现边框是由四个小三角组成。
给其他角度的三角设置透明度，然后只留一个即可实现一个三角形， 最后通过定位设置位置，tansform的rotate属性值设置旋转度数，实现效果。
如果不是指这里，建议详细描述一下具体指的是哪里，便于帮助同学准确的定位与解决问题。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星