麻烦老师看下 是否有误

来源: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

同学你好,代码布局可以,样式上还可以优化:

五角星顶部有一点点没有对齐

https://img.mukewang.com/climg/615d17a909dacce303830318.jpg

可以调整下角度和位置,例如:

https://img.mukewang.com/climg/615d17bf09e1a00314560426.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程