CSS 渐变的角度问题

July 28,2016
0
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);
}

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


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。