溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS如何畫五角星”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS如何畫五角星”吧!
思路：其實實現五角星的思路就是先繪制3個三角形，再將這三個三角形組合而成，就可以得到一個五角星了。
具體代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS繪制五角星 - 億速云(yisu.com)</title> <style type="text/css">#star-five { margin: 100px 0; position: relative; display: block; color: red; width: 0px; /*設置元素寬高為0*/ height: 0px; border-right: 100px solid transparent; /*設置右部分為透明*/ border-bottom: 70px solid #ff0000; /*設置底部為紅色*/ border-left: 100px solid transparent; /*設置左部分為透明*/ /*旋轉角度為順時針35度*/ -moz-transform: rotate(35deg); /*Firefox*/ -webkit-transform: rotate(35deg); /*Safari 和 Chrome*/ -ms-transform: rotate(35deg); /*IE 9*/ -o-transform: rotate(35deg); /*Opera*/}#star-five:before { border-bottom: 80px solid #ff0000; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);}#star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #ff0000; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';} </style></head><body> <div id="star-five"></div></body></html>到此，相信大家對“CSS如何畫五角星”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
