css切角效果代码实例
分类：实例代码
下面使用css3实现了矩形的切角效果。
提供了三种切角，一个是只有一个切角，两个具有多个切角。
后两个的切角也有所不同，最后一个切角是具有一定弧度的，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
padding: 10px;
margin: 10px 20px;
}
.corner {
background: linear-gradient(-45deg, transparent 15px, #58a 0);
}
.corner2 {
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #58a 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.corner3 {
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;
}
</style>
</head>
<body>
<div class="box corner"></div>
<div class="box corner2"></div>
<div class="box corner3"></div>
</body>
</html>
上面的代码实现了我们的要求，更多内容可以参阅相关阅读。
相关阅读:
（1）.linear-gradient可以参阅css3 linear-gradient一章节。
（2）.background-size可以参阅background-size一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu