CSS 渐变的角度问题

效果展示

代码

.corner {
  width: 300px;
  height: 100px;
  margin: 50px auto;
  background: #58a;
  background: linear-gradient(45deg, transparent 15px, #58a 0) bottom left, linear-gradient(
        135deg,
        transparent 15px,
        #58a 0
      ) top left, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
    linear-gradient(-135deg, transparent 15px, #58a 0) top right;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

角度问题

平常我们理解的角度 X 轴的正轴是 0°，顺时针旋转为负角，逆时针旋转为正角。

CSS 中的角度 Y 轴的正轴是 0°，顺时针旋转为正角，逆时针旋转为负角，箭头所指的方向即使渐变的方向，在 CSS 中默认的渐变角度是自上而下的。

如果按照平常我们理解角的思维来做这个切角的效果的话，肯定免不了折腾，甚至做不出来这个效果。其实对比一下两幅图也就明白了 CSS 渐变角度，那么这个效果就可以自然而然地做出来了。

浏览器兼容

兼容主流浏览器：Edge + Chrome + Firefox + IE10+

代码的可维护性

在作者看来上面实现的代码是不够 DRY 的，因此要使代码更加容易维护和重用，那对于原生 CSS 来说就有点强人所难了，所以预处理器登场了，例如 SCSS ，可以将上面的代码写成 Mixin ，以便维护和重用，如下：

@mixin corner-shape($bg, $tr: 0) {
  background: $bg;
  background: linear-gradient(45deg, transparent $tr, $bg 0) bottom left, linear-gradient(
        135deg,
        transparent $tr,
        $bg 0
      ) top left, linear-gradient(-45deg, transparent $tr, $bg 0) bottom right, linear-gradient(
        -135deg,
        transparent $tr,
        $bg 0
      ) top right;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

.corner {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  @include corner-shape(#58a, 15px);
}

经过编译之后就可以生成和文章开头一模一样的代码了。