问题

箭头

如上图👆这种，切掉一个矩形的一个或多个角的设计效果，前端在切图时会经常遇到这样的场景，如何使用css轻易实现这种效果？

解决方案

  • 使用css的渐变就能实现这种效果。假设我们需要一个右下角被切掉的效果，我们只需要一个从右下角到左上角（-45deg）的线性渐变，从透明色开始渐变，然后在相同的位置设置另一个色值就能实现。（假设切角深度为35px）：
1
background: linear-gradient(-45deg, transparent 35px, #C02A79 0);

切角

  • 现在，我们来把它变成一个向右箭头的样子，只需要再为它加一层渐变：
1
2
3
background: 
    linear-gradient(-135deg, transparent 35px, #C02A79 0) top,
    linear-gradient(-45deg, transparent 35px, #C02A79 0) bottom;

如果你运行了上面的代码你就会发现，结果是这个样子的😱。

  • 这是因为我们使用了两层渐变，默认情况下，两层渐变都会填满整个元素，会相互覆盖，而且两层渐变都会默认平铺整个元素，所以我们需要设置background-size让每层渐变只占据元素的一半，并关掉background-repeat：
1
2
3
4
5
background: 
    linear-gradient(-135deg, transparent 35px, #C02A79 0) top,
    linear-gradient(-45deg, transparent 35px, #C02A79 0) bottom;
background-size: 100% 50%;
background-repeat: no-repeat;

箭头

  • 看到这里你应该也知道怎么做出4个切角的效果了：
1
2
3
4
5
6
7
background: 
    linear-gradient(135deg, transparent 15px, #C02A79 0) top left,
    linear-gradient(-135deg, transparent 15px, #C02A79 0) top right,
    linear-gradient(-45deg, transparent 15px, #C02A79 0) bottom right,
    linear-gradient(45deg, transparent 15px, #C02A79 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

4个切角

  • 虽然实现了我们想要的效果，但是上面的代码非常臃肿切难以维护，每当我们需要修改背景颜色或切角尺寸时，都需要修改4处，我们可以使用css预处理器减少代码的重复度。例如使用scss：
1
2
3
4
5
6
7
8
9
10
@mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
    background: $bg;
    background:
      linear-gradient(135deg, transparent $tl, $bg 0) top left,
      linear-gradient(225deg, transparent $tr, $bg 0) top right,
      linear-gradient(-45deg, transparent $br, $bg 0) bottom right,
      linear-gradient(45deg, transparent $bl, $bg 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

在需要的时候就可以直接调用它，传入2-5个参数：

1
2
@include beveled-corners(#C02A79, 15px); // 4个15px的切角 
@include beveled-corners(#C02A79, 0， 15px, 15px, 0); // 只有左上和左下15px的切角

弧形切角

  • 有了上面实现切角的经验，如果想要实现弧形切角的话也就很容易了。只需要把上面的线性渐变换成径向渐变即可：
1
2
3
4
5
6
7
background:
    radial-gradient(circle at top left, transparent 15px, #C02A79 0) top left,
    radial-gradient(circle at top right, transparent 15px, #C02A79 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #C02A79 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #C02A79 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

css弧形切角

  • 以后再遇到类似这种的切角效果就不用麻烦UI小姐姐🤦切图啦。（下图完整代码看👉这里👈）

优惠券

另一种解决方案(clip-path)

  • 使用css的clip-path属性的polygon函数，也能够实现同样的效果，例如将一个元素切出4个20px的斜面切角：
1
2
3
4
5
6
7
background: deepskyblue;
clip-path: polygon(
    20px 0, calc(100% - 20px) 0, 
    100% 20px, 100% calc(100% - 20px), 
    calc(100% - 20px) 100%, 20px 100%, 
    0 calc(100% - 20px), 0 20px
);

使用clip-path实现切角

  • 这种方法的代码确实短了很多，但是它写起来却并不比使用渐变简单，而且不容易维护，假如我们要改动切角的尺寸，那需要改动八处！这种方法的好处是我们可以对任意类型的背景（比如图片）进行裁切。

附 - 线性渐变角度

线性渐变角度

  • 如上图0deg代表渐变方向为从下到上，45deg代表从左下到右上,90deg代表从左向右，诸如此类正角度代表顺时针方向，负角度代表逆时针方向；当然你也可以使用另一种方法指定渐变的方向：
1
2
3
background: linear-gradient(to top right, blue, pink);
// 等同于
background: linear-gradient(45deg, blue, pink);

内容来自《css揭秘》一书；
对css渐变不熟悉的同学可以参考 MDN-css渐变；