css3+html畫五星紅旗
阿新 • • 發佈:2021-12-25
半個,還差一點,但是我懶
用邊框寫的,絕對定位,然後寫好一個,其他的寫旋轉縮放去網頁調整到合適位置
<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>