通过Css实现div切角效果，在实际项目中，可以实现以下视觉效果来查看图片：

Html

Div类=' corner'/div

1.一个倒角

想法：要获得带有倒角的元素，只需使用径向渐变即可。此渐变必须将透明色标放置在倒角上，然后在同一位置设置不同的色标，并将颜色设置为所需的背景色。大卫亚设(David Assell)，Northern Exposure(美国电视新闻)。

Css:

.corner{

宽度：628px

海特：432px

background:# 58a；

Background: linear-gradient (-45度、transparent 20px、# 58 a 0)；

}

效果图表：

2.两个倒角

在上面的例子中，我们很快想到这样写

Css:

.corner {

宽度：200px

海特：150px

background:# 58a；

Background: linear-gradient (-45度、transparent 20px、# 58a0)，

线性-梯度(45度、transparent 20px、# 58a 0)；

}

效果：

我们发现左下角和右下角的两个渐变互相覆盖，所以没有达到想要的效果。所以只能看到背景色。

所以我们想到了后花园-西泽。是的。将background-size的值设置为一半不就可以了吗？由于忘记关闭Background-repeat，因此每个渐变图案分别平铺了两次，显示背景仍然相互复盖。但是，这次由于背景平铺，修改的代码如下：Northern Exposure)。

Css:

.corner{

宽度：200px

海特：150px

background:# 58a；

Background: linear-gradient (-45度、transparent 20px、# 58a0) right，

线性-梯度(45度、transparent 20px、# 58a 0)left；

background-size:50% 100%；

背景-repeat:否-repeat；

}

效果：

3.4个倒角

Css:

.corner{

宽度：200px

海特：150px

background:# 58a；

Background: linear-gradient (-45度、transparent 15px、# 58a0) bottom right，

Linear-gradient (45deg、transparent 15px、# 58a0) bottom left、

Linear-gradient (135deg、transparent 15px、# 58a0) top left、

Linear-gradient (-135deg、transparent 15px、# 58a 0)top right；

background-size:50% 51%；

背景-repeat:否-repeat；

}

效果：

4.圆弧倒角

Css:

.corner{

宽度：200px

海特：150px

background:# 58a；

background:radial-gradient(circle at bottom right、transparent 15px、# 58a0) bottom right、

radial-gradient(circle at bottom left、transparent 15px、# 58a0) bottom left、

radial-gradient(circle at top left、transparent 15px、# 58a0) top left、

radial-gradient(circle at top right、transparent 15px、# 58a 0)top right；

background-size:50% 51%；

背景-repeat:否-repeat；

}

效果：

6.使用clip-path实现

Css:

.corner{

宽度：330px

海特：250px

background:URL(' http://www . duanlonglong . com/uploads/allimg/220111/1-22011100536140 . PNs)

background-size:cover；

Clip-path: polygon (20px0，calc (100%-20px) 0，

100% 20px、100% calc(100%-20px)，

Calc(100%-20px) 100%、20px 100%、

0 calc(100%-20px)，0 20px)；

}

效果：

本文参考博客https://www . cn blogs . com/Anita-Meng/p/7874615 . html