CSS3实现三种切角效果
效果一：
代码：
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);
}
效果二：
代码：
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;
}
效果三：
代码：
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;
}