本文共 2238 字，大约阅读时间需要 7 分钟。

切角效果

普通切角

假设我们只需要一个角被切掉的效果，以右下角为例。渐变可以接受一个角度（45deg）作为方向，而且色标的位置信息可以是绝对的长度值。因而我们可以用一个线性渐变就能完成右下角被切掉的效果，只需要把一个透明色标放在切角处。

.box1{

 width:200px;  height: 100px;  background:
 linear-gradient(45deg, transparent 15px, #58a 0);}

现在我们想要两个角被切掉的效果，以底部的两个角为例，只用一层渐变是不够的，还需要再加一层。

.box2{

 margin: 20px;  width: 200px;  height: 100px;  background:
 linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;}

然而这两层渐变会相互覆盖，最终得到的效果是：

所以我们用background-size使两层渐变分开。

.box3{

 margin: 20px;  width: 200px;  height: 100px;  background:
 linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;  background-size: 50% 100%;}

然后这依然不是想要的效果，原因在于background默认是repeat的，需要把background-repeat设置成no-repeat。

.box4{

 margin: 20px;  width: 200px;  height: 100px;  background:
linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #655 0) left;  background-size: 50% 100%;  background-repeat: no-repeat;}

如果我们想要四个角都被切掉的效果，就可以用四层渐变：

.box5{

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

弧形切角

上述渐变还有一个变种，可以用来创建弧形切角（也叫“内凹圆角”）。我们使用径向渐变来达到这种效果：

.box6{

 width: 200px;  height: 100px;  background:
 radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;  background-size:50% 50%;  background-repeat: no-repeat;}

裁切路径方案

可以使用clip-path将一个元素切出20px大小（以水平方向度量）的斜面切角：

.box7{

 width: 200px;  height: 100px;  background-color: #58a;  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
);}

这个方案的不足在于，它会连容器中的文字一并裁切掉，如上图所示。

本篇文章是《css揭秘》一书的笔记，如果侵犯到了原作者的权益，请联系我删除。

转载地址：https://blog.csdn.net/PeZXO/article/details/106218077 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！