CSS實現(xiàn)一個漸變色箭頭的示例代碼
我要評論需求
產(chǎn)品希望在漏斗圖的旁邊，每一層漏斗邊上加上一個漸變色的箭頭，效果如下：
實現(xiàn)
網(wǎng)上大部分的箭頭實現(xiàn)都是利用一個 div 來實現(xiàn)箭頭軀干的矩形部分，再利用其 ::after 偽元素的 border 繪制一個三角形頭部。這樣會導(dǎo)致漸變的背景無法在兩個元素上連貫的過渡。
直接讓UI出圖？缺點是肉眼可見的模糊，尤其在高分辨率屏、滾輪放大的情況下。
筆者能想到的相關(guān) API 有 background-clip 和 mask，在查閱相關(guān)文檔的時候發(fā)現(xiàn)了下面這個方法： polygon() - CSS: Cascading Style Sheets | MDN (mozilla.org)
文檔一點進(jìn)去就是一個漸變色的箭頭，真是踏破鐵鞋無覓處，得來全不費工夫。
<div class="arrow"></div>
.arrow {
width: 20px;
height: 100px;
background-image: linear-gradient(to bottom, red, yellow);
clip-path: polygon(50% 100%, 0% 85%, 35% 85%, 35% 0%, 65% 0%, 65% 85%, 100% 85%);
}polygon 方法看起來有一些抽象，其實就是通過在指定元素中，定義若干個頂點，最終裁剪出一個由這些頂點連接起來形成的多邊形。其中每一組參數(shù)，定義的是這些頂點的相對于元素的位置。最終會裁出該元素位于多邊形內(nèi)的內(nèi)容，不在clip-path定義的區(qū)域內(nèi)的部分將不會顯示。
以上就是CSS實現(xiàn)一個漸變色箭頭的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于CSS實現(xiàn)漸變色箭頭的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了CSS常用樣式之繪制雙箭頭的示例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-31
通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼
這篇文章主要介紹了通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-15CSS拾遺之箭頭,目錄,圖標(biāo)的實現(xiàn)代碼
這篇文章主要介紹了CSS拾遺之箭頭,目錄,圖標(biāo)的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-14
我們在很多UI框架中看到帶箭頭的提示框，感覺挺漂亮，今天小編通過實例代碼給大家介紹CSS實現(xiàn)帶箭頭的提示框效果，感興趣的朋友一起看看吧2019-10-15css 11種方法實現(xiàn)一個tips帶有描邊的小箭頭
這篇文章主要介紹了css 11種方法實現(xiàn)一個tips帶有描邊的小箭頭,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2019-02-21
這篇文章主要介紹了css實現(xiàn)帶箭頭和圓點的輪播的相關(guān)資料,當(dāng)鼠標(biāo)移入圖片、圓點和方向鍵時，停止輪播，移除恢復(fù)。具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-28使用CSS和Bootstrap圖標(biāo)制作上下跳動的指示箭頭動畫效果
有時侯頁面很長，需要指示箭頭告訴用戶下面還有東西。下面腳本之家小編給大家?guī)砹耸褂肅SS和Bootstrap圖標(biāo)制作上下跳動的指示箭頭動畫效果，感興趣的朋友一起看看吧2018-06-04
純CSS制作各種各樣的網(wǎng)頁圖標(biāo)（三角形、暫停按鈕、下載箭頭、加號等）
這篇文章主要介紹了純CSS制作各種各樣的網(wǎng)頁圖標(biāo)（三角形、暫停按鈕、下載箭頭、加號等）的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過2018-03-27
使用css實現(xiàn)任意大小、任意方向和任意角度的箭頭示例
這篇文章主要介紹了使用css實現(xiàn)任意大小、任意方向和任意角度的箭頭示例的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-05手把手教你用CSS實現(xiàn)帶箭頭的流程進(jìn)度條
這篇文章主要給大家介紹了利用CSS實現(xiàn)帶箭頭的流程進(jìn)度條大方法，文中給出了詳細(xì)的示例代碼，對大家具有一定的參考價值，有需要的朋友們一起來看看吧。2017-01-22
