麻烦老师看下 是否有误
来源:2-13 编程练习
dww1
2021-10-05 16:46:13
<style>
section{
width: 160px;
height: 140px;
border: 1px solid rgba(179, 179, 179, 0.404);
box-shadow: 5px 5px 20px rgba(179, 179, 179, 0.404);
margin: 50px auto;
}
div.bg{
width: 150px;
height: 100px;
background-color: red;
margin: 20px auto;
position: relative;
}
div.bg div.tri{
width: 0;
height: 0;
border: 14px solid transparent;
border-top: 10px solid yellow;
transform: translateX(20px) translateY(20px);
}
div.bg div.tri::before{
content: '';
position: absolute;
width: 0;
height: 0;
border: 14px solid transparent;
border-left: 10px solid yellow;
transform: rotate(21deg) translateX(-11px) translateY(-14px);
}
div.bg div.tri::after{
content: '';
position: absolute;
width: 0;
height: 0;
border: 14px solid transparent;
border-right: 10px solid yellow;
transform: rotate(-21deg) translateX(-11px) translateY(-22px);
}
div.bg div.tri:nth-child(1){
transform: translateX(13px) translateY(33px);
}
div.bg div.tri:nth-child(2){
transform: rotate(20deg) translateX(25px) translateY(-28px) scale(.4);
}
div.bg div.tri:nth-child(3){
transform: rotate(40deg) translateX(16px) translateY(-51px) scale(.4);
}
div.bg div.tri:nth-child(4){
transform: rotate(71deg) translateX(-18px) translateY(-54px) scale(.4);
}
div.bg div.tri:nth-child(5){
transform: rotate(20deg) translateX(19px) translateY(-51px) scale(.4);
}
</style>
<section>
<div class="bg">
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
<div class="tri"></div>
</div>
</section>
1回答
好帮手慕星星
2021-10-06
同学你好,代码布局可以,样式上还可以优化:
五角星顶部有一点点没有对齐
可以调整下角度和位置,例如:
祝学习愉快!
相似问题