CSS实现一个渐变色的箭头🔜

需求

产品希望在漏斗图的旁边,每一层漏斗边上加上一个渐变色的箭头,效果如下:

实现

网上大部分的箭头实现都是利用一个 div 来实现箭头躯干的矩形部分,再利用其 ::after 伪元素的 border 绘制一个三角形头部。这样会导致渐变的背景无法在两个元素上连贯的过渡。

直接让UI出图?缺点是肉眼可见的模糊,尤其在高分辨率屏、滚轮放大的情况下。

笔者能想到的相关 API 有 background-clipmask,在查阅相关文档的时候发现了下面这个方法: polygon() - CSS: Cascading Style Sheets | MDN (mozilla.org)

文档一点进去就是一个渐变色的箭头,真是踏破铁鞋无觅处,得来全不费工夫。

html 复制代码
<div class="arrow"></div>
CSS 复制代码
.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定义的区域内的部分将不会显示。

相关推荐
萌萌哒草头将军1 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中2 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊2 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj2 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝3 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3113 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion3 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜3 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾3 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*3 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm