CODERFE

CSS 渐变的角度问题

今天在看《CSS揭秘》这本书的时候,作者用渐变做出了一个切角的效果(把矩形的四个角切掉),她使用 background 属性来制作了这个效果,不得不惊叹作者对于 CSS 的高超运用。但是在我动手做的过程中发现,在 CSS 中渐变的角度似乎和我们平常理解的角度有些许差别,为此查阅了一些资料,果然有出入,所以在此分享一下!

效果展示

corner-shape

代码

1
2
3
4
5
6
7
8
9
10
11
12
.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%;
}

角度问题

平常我们理解的角度应该是下面这样的:

normal-angles

X轴的正轴是0°,顺时针旋转为负角,逆时针旋转为正角。

CSS 中的角度:

css-angles

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

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

浏览器兼容

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

代码的可维护性

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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);
}

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