最近的项目中，设计出的图上有四个角是切角的按钮，想着不用背景图片来实现。

先看下要实现的效果

• 1、首先实现4个切角，利用clip-path 的 polygon多边形来实现

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

  以元素的左上角为原点，向左向下的坐标系

  用八个点确定按钮形状

  

  .btn {
      display: block;
      box-sizing: border-box;
      padding: 13px 29px;
      font-size: 16px;
      line-height: 1;
      color: #fff;
      background: #000;
      border: 1px solid yellow;
      clip-path: polygon(
        0 17px,
        17px 0,
        calc(100% - 17px) 0,
        100% 17px,
        100% calc(100% - 17px),
        calc(100% - 17px) 100%,
        17px 100%,
        0 calc(100% - 17px)
      );
  }

  可以看到切角是有了，可是边框只在4边上。

• 2、利用background的linear-gradient实现切角上的边框

  CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型 MDN

  

  • 左上角

    由上图可知，度数和方向正好相反

    由勾股定理算出 yellow所占约为12px

    

    .btn {
      background: linear-gradient(135deg, yellow 12px, #282f4f 0) top left;
    }

  • 右上角

    .btn {
      background: linear-gradient(135deg, yellow 12px, #282f4f 0) top left,linear-gradient(-135deg, yellow 12px, #282f4f 0) top right;
    }

  • 左下角

    .btn {
      background: linear-gradient(135deg, yellow 12px, #282f4f 0) top left,linear-gradient(-135deg, yellow 12px, #282f4f 0) top right,
      linear-gradient(45deg, yellow 12px, #282f4f 0) bottom left;
    }

  • 右下角

    .btn {
      background: linear-gradient(135deg, yellow 12px, #282f4f 0) top left,linear-gradient(-135deg, yellow 12px, #282f4f 0) top right,
      linear-gradient(45deg, yellow 12px, #282f4f 0) bottom left,linear-gradient(-45deg, yellow 12px, #282f4f 0) bottom right;
    }

    效果如下，可以看到只有左上角的边框出现了。

  出现这个结果，是因为背景默认是铺满整个按钮的，我们进行了4重渐变背景，将背景缩小一倍（注意这里不是画了背景再缩小，而是将画渐变的区域缩小）且禁止重复（若不禁止会重复第一重背景铺满整个按钮），刚好一重背景占1/4

  .btn {
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }

原理：背景展示的是4个角是黄色三角形的矩形，利用clip-path,裁掉部分三角，视觉上就剩一条线，模拟为边框。

最终代码

.btn {
        display: block;
        box-sizing: border-box;
        padding: 13px 29px;
        font-size: 16px;
        line-height: 1;
        color: #fff;
        background: linear-gradient(135deg, yellow 12px, #282f4f 0) top left,linear-gradient(-135deg, yellow 12px, #282f4f 0) top right,
        linear-gradient(45deg, yellow 12px, #282f4f 0) bottom left,linear-gradient(-45deg, yellow 12px, #282f4f 0) bottom right;
        background-size: 50% 50%;
    background-repeat: no-repeat;
        border: 2px solid yellow;
        clip-path: polygon(
          0 17px,
          17px 0,
          calc(100% - 17px) 0,
          100% 17px,
          100% calc(100% - 17px),
          calc(100% - 17px) 100%,
          17px 100%,
          0 calc(100% - 17px)
        );
    }