css使用clip-path属性切割显示可见内容

1. 需求

想要实现一个渐变的箭头Dom，不想使用svg、canvas去画，可以考虑使用css的clip-path属性切割显示内容。

2. 实现

html 复制代码

<div class="arrow">
	箭头
</div>

css 复制代码

.arrow{
	width: 200px;
	height: 60px;
    background-image: linear-gradient(45deg, #1e90ff, #00bfff);
    position: relative;
    clip-path: polygon(0% 0%, 80% 0%, 90% 50%, 80% 100%, 0% 100%, 10% 50%);
    line-height: 60px;
    text-align: center;
    color: white;
}

3. 效果

4. 讲解

clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

用于裁剪的值有三种类型，分别是basic-shape 、clip-source 、geometry-box。

类型	解释
basic-shape	使用基本形状函数来定义裁剪路径。
clip-source	可以是一个URL，指向一个SVG中的`<clipPath>`元素。
geometry-box	如果与`<basic-shape>`一起使用，则它定义了`<basic-shape>`相对的盒子模型；单独使用时，它使用指定的盒子作为裁剪路径。

注意：这是说该属性的用于裁剪的值有三种类型，不是指具体的值是这三种。

4.1 使用盒子属性裁剪

css 复制代码

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

4.2 常用的基本形状函数

css 复制代码

/* <basic-shape> values */
clip-path: inset(100px 50px);	/* 矩形裁剪路径 */
clip-path: circle(50px at 0 100px);	/* 圆形裁剪路径 */
clip-path: ellipse(50px 60px at 10% 20%);	/* 椭圆裁剪路径 */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);	/* 多边形裁剪路径 */

也可以按照svg的path裁剪。

css 复制代码

clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

4.3 组合使用 geometry-box 和 basic-shape

css 复制代码

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

4.4 使用 SVG 定义裁剪路径

通过引用一个SVG内的<clipPath>元素来定义更复杂的裁剪路径。

html 复制代码

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
  </defs>
</svg>

css 复制代码

.example {
  clip-path: url(#myClip);
}

注意：使用前注意浏览器兼容性，比较早的浏览器未必支持。

求关注