css3+html画五星红旗
作者:互联网
半个,还差一点,但是我懒
用边框写的,绝对定位,然后写好一个,其他的写旋转缩放去网页调整到合适位置
<style>
{
margin: 0;
padding: 0;
}
section {
width: 600px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
margin: 30px auto;
}
div{
width: 0;
height: 0;
border-top: yellow solid 30px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
position: absolute;
margin-top: 40px;
margin-left: 40px;
}
div::before {
content: '';
width: 0;
height: 0;
border-top: yellow solid 30px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
transform: rotate(72.5deg);
display: block;
margin-left: -49px;
margin-top: -28px;
}
div::after {
content: '';
width: 0;
height: 0;
border-top: yellow solid 30px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
transform: rotate(-72.5deg);
display: block;
margin-left: -50px;
margin-top: -28px;
}
.x2 {
margin-top: 13px;
margin-left: 127px;
transform: rotate(22deg) scale(0.25);
}
</style>
//html
<body>
<section class="hong">
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
<div class="x5"></div>
</section>
</body>
</html>
标签:css3,solid,margin,top,50px,五星红旗,html,border,left 来源: https://www.cnblogs.com/zongkm/p/15730145.html