CSS3实现元素缺角及缺角的边框

在项目中碰到一个数据可视化的业务，ui画了一些不规则的缺角矩形作为背景，但是又没有提供切图，本着求人不如求己的原则，就尝试拿CSS来画这种缺角的矩形及边框吧。

缺角的实现

CSS3中有一个很常用的属性background，但是他的有些取值却不是那么常用，比如说gradient渐变，我们就可以通过渐变来实现缺角。

CSS3中定义了两种类型的渐变：

• 线性渐变
• 径向渐变

当然关于渐变的更多内容不在这里过多赘述，我是用到了线形渐变，所以会在后续把用到的线性渐变内容放上去。

线性渐变的语法：

background-imag: linear-gradient(direction, color-stop1, color-stop2, ....)

关于方向，你可以用top、bottom等指定，也可以给定一个角度值。比如0deg表示从下往上的方向渐变。45deg表示从左下往右上的方向渐变。-45deg表示从右下往左上的方向渐变。

一个切角

可能现在大家还不清楚渐变跟缺角有什么关系，那就到代码中来看吧，比如咱们来实现一个右上角的缺角。

<div class="rect">
</div>

.rect{
    width: 200px;
    height: 200px;
    background: linear-gradient(-135deg, transparent 10px, #f00 0);
}

效果如下：

我们定义了一个从右上角到左下角的渐变，第一个色标为透明，长度10px，所以从右上角切出了一个角。

第二个色标我们给的是#f00 0，前边的#f00表示颜色，0表示填充剩余部分，所以剩余部分全部填充了红色。

两个切角

通过这种方法我们可以实现一个切角，但如果是多个切角呢？

先说结论，如果是多个切角我们需要使用多块背景色进行拼接来实现，为了方便演示我会使用多种颜色来实现以直观的显示出来背景是多块拼接而成的，实际使用中只要将多块背景色设置为一致就可以了。

现在我们将矩形的左上角和右上角进行切角。

<div class="rect">
</div>

.rect{
      width: 200px;
      height: 200px;
      background: linear-gradient(-135deg, transparent 10px, #f00 0) right,
          		  linear-gradient(135deg, transparent 10px, #0f0 0) left;
      background-size: 50% 100%;
      background-repeat: no-repeat;
    }

效果如下：

首先我们定义了两个线性渐变的背景并为其指定了位置，然后我们对背景的大小进行设置，根据切角的位置呢我们会把矩形左右分开，所以我们设置背景大小的将X设为50%，Y设为100%

四个切角

实现四个切角的思想跟实现两个切角是一样的，只是把背景分成了四块而已。

.rect{
      width: 200px;
      height: 200px;
      background: linear-gradient(-135deg, transparent 10px, #f00 0) top right,
          		  linear-gradient(135deg, transparent 10px, #0f0 0) top left,
          		  linear-gradient(45deg, transparent 10px, #00f 0) bottom left, 
          		  linear-gradient(-45deg, transparent 10px, #0ff 0) bottom right;
      background-size: 50% 50%;
      background-repeat: no-repeat;
    }

效果如下：

思想还是一样的，只是需要注意现在分成了四块，所以我们设置背景大小的时候要把X和Y都设置为50%

现在可能会有小伙伴要问，如果是切三个角怎么办啊，这怎么分，背景大小怎么设置呢？

答案是：还是按照四个角来切，只是其中一个角不需要使用transparent来做切角效果了。

现在我们看一下切三个角并且将颜色保持一致的效果：

.rect{
      width: 200px;
      height: 200px;
      background: linear-gradient(-135deg, transparent 10px, #f00 0) top right,
          		  linear-gradient(135deg, transparent 10px, #f00 0) top left,
          		  linear-gradient(45deg, transparent 10px, #f00 0) bottom left, 
          		  linear-gradient(-45deg, #f00 0, #f00 100%) bottom right;
      background-size: 50% 50%;
      background-repeat: no-repeat;
    }

注意！

前边的内容应该很简单，大家也都知道使用渐变来切角是通过多块背景色拼接来实现的

但是，这个操作还有但是！

元素的宽高一定设置为偶数，如果设置为奇数会因为无法均分导致出现大家不想看到的效果

比如：

clip-path

是的，CSS还有这么一个属性，我前几天的博客写到一个clip-rect的用法，但是那个只能用来切一个矩形，现在这个正如其名，可以根据一条路径来进行切割。

比如我们要切角的元素是一张图片，而不是填充的背景色，这个时候渐变肯定不好用了。

语法：

clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ... xn,yn)

clip-path的用法比clip-rect更好理解，就是一对坐标点，连起来就是我们要显示的区域了。

clip-path比较灵活，可以自己设置要裁切的坐标点，所以不只是能用来切角，只要创意足够多，可以实现更多有意思的效果。

兼容性不敢保证哦，老版本浏览器可能就翻车了。

缺角边框

缺角的效果是两个矩形叠加形成的。

<div class="out">
    <div class="inner"></div>
</div>

保证内部的矩形处于外部矩形的正中央，且宽高为外部矩形的100%，这样就可以通过外部矩形的padding来设置边框的宽度了。

直接看代码：

.out{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, transparent 10px, #f00 0);
    padding: 4px;
}
.inner{
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 10px, #fff 0);
}

效果如下：

看网上有大神可以通过linear gradient实现更多有趣的效果，比如：

还有更多好玩的用法就等你自己去挖掘了。

下次碰到这种问题，直接问ui要一个切图可使头发留存率+300%！