溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“CSS如何畫五角星”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“CSS如何畫五角星”吧!
思路：其實實現(xiàn)五角星的思路就是先繪制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; /*設(shè)置元素寬高為0*/ height: 0px; border-right: 100px solid transparent; /*設(shè)置右部分為透明*/ border-bottom: 70px solid #ff0000; /*設(shè)置底部為紅色*/ border-left: 100px solid transparent; /*設(shè)置左部分為透明*/ /*旋轉(zhuǎn)角度為順時針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如何畫五角星”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼