CSS 渐变的角度问题

Avatarcoderfee/Jul 28, 2016/#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);
}

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

Copyright ©; 2016-2022 coderfee, All rights reserved.