溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)css如何使用conic-gradient繪制三角形，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
使用 conic-gradient 繪制三角形
還是漸變，上述我們使用了線性漸變實現(xiàn)三角形，有意思的是，在漸變家族中，角向漸變 conic-gradient 也可以用于實現(xiàn)三角形。
方法在于，角向漸變的圓心點是可以設(shè)置的，類似于徑向漸變的圓心點也可以被設(shè)置。
我們將角向漸變的圓心點設(shè)置于 50% 0，也就是 center top，容器最上方的中間，再進行角向漸變，漸變到一定的角度范圍內(nèi)，都是三角形圖形。
假設(shè)我們有一個 200px x 100px 高寬的容器，設(shè)置其角向漸變圓心點為 50% 0：
并且，設(shè)置它從 90° 開始畫角向漸變圖，示意圖如下：
可以看到，在初始的時候，角向漸變圖形沒有到第二條邊的之前，都是三角形，我們選取適合的角度，非常容易的可以得到一個三角形：
<div class="normal"></div>
<div class="acute"></div>
.normal {
background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}
.acute {
background: conic-gradient(from 90deg at 50% 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);
}
關(guān)于“css如何使用conic-gradient繪制三角形”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(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)站二維碼