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