clip-path

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

语法

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none;

• <clip-source>: 剪切元素的路径
• <basic-shape>: 定义图形，有四个值inset , circle , ellipse , polygon
• <geometry-box>: 它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。几何框盒可以有以下的值中的一个：margin-box, border-box, padding-box, content-box, fill-box, stroke-box, view-box

语法详解

<clip-source>

引入svg(内部外部均可)

• 内部： clip-path: url(#c1);
• 外部： clip-path: url(path.svg#c1);

<basic-shape>

有四个值inset , circle , ellipse , polygon

inset()

定义一个矩形
语法: inset( <shape-arg>{1,4} [round <border-radius>]? )
前4个参数，分别表示该矩形距离上右下左的值；后面的可选参数，用于设置该矩形的圆角，圆角的参数写法同border-radius的写法一样。

.box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(45deg, #ff3c41, #ff9800);
    clip-path: inset(0 0 5px 0 round 5px 0 5px 0);
    // clip-path: inset(0 0 5px 0 round 5px);
}

circle()

定义一个圆形
语法：circle( []? [at ]? )

• 参数代表了 r， 即圆形的半径， 不接受负数作为该参数的值。一个以百分比表示的值将以公式 sqrt(width^2+height2)/sqrt(2)计算，其中width与height为相关盒模型的宽与高
• 参数定义了圆心的位置，若没写，则默认中心位置

.box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(45deg, #ff3c41, #ff9800);
    clip-path: circle(20px);
}

ellipse()

定义一个椭圆
语法：ellipse( [{2}]? [at ]? )

• 参数代表了 rx 与 ry，其中 rx 代表了x轴方向的半径， ry代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 rx 的参照值，高作为 ry 的参照值
• 参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心

.box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(45deg, #ff3c41, #ff9800);
    clip-path: ellipse(50px 20px);
}

polygon()

定义多边形
语法： polygon( [,]? [ ]# )
代表了填充规则（ filling rule ），即，如何填充该多边形。 可选值为 nonzero(非零环绕规则)和 evenodd(奇偶规则)。 该参数的省缺值为 nonzero。
每一对在列表中的参数都代表了多边形顶点的坐标， xi 与 yi ，i代表顶点的编号，即，第i个顶点。
例如画一个三角形

.box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(45deg, #ff3c41, #ff9800);
    clip-path: polygon(calc(50% - 5px) calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%);
}

实例

对话框一般有个小箭头，以前的做法是用border-radius写一个小三角形，然后赋予一个跟对话框一样的颜色。倘若对话框里是一张图片。可能就比较麻烦，但是用clip-path这个属性就会比较容易解决了，效果图如下：

完整代码

<div class="wrap">
      <div class="box"></div>
   </div>

<style>
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 180px;
            transform: translate(-50%, -50%);
        }
        .box::before,.box::after{
            content:'';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: url('1.jpg');
            background-size: 100% 100%;
            z-index: -1;
        }
        .box::before {
            clip-path: inset(0 0 0 5px round 5px);
        }
        .box::after{
            clip-path: polygon(0 20px, 5px 15px, 5px 25px);
        }
    </style>

本文参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path