本文介绍了使用CSS3实现三种切角效果的方法。分别给出了三种效果的代码示例及对应的CSS样式，包括线性渐变和径向渐变的运用，通过设置不同的角度、透明度和背景大小等属性来实现不同的切角样式。
CSS3实现三种切角效果
2018年09月10日 19:10:44 小萌丹 阅读数：1757
效果一：
代码：<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div>
CSS：
.cornerCut{
width:200px;
margin: 10px 20px;
height: 200px;
background:#58a;
color:#fff;
text-align: center;
font-size:10px;
background:linear-gradient(45deg,transparent 15px, #58a 0);
}
效果二：
代码：<div class="cornerCut2"></div>
CSS：
.cornerCut2{
width:200px;
margin: 10px 20px;
height: 200px;
background:#58a;
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 left,
linear-gradient(-135deg,transparent 15px,#58a 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
效果三：
代码：<div class="cornerArc"></div>
CSS：
.cornerArc{
width:200px;
margin: 10px 20px;
height: 200px;
background:#58a;
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;
}
扫一扫
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
