设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。
1、方案一:利用linear-gradient
.chamfer{
background: #3b3;
background: linear-gradient(135deg, transparent 15px, #3b3 0) top left,
linear-gradient(-135deg, transparent 15px, #3b3 0) top right,
linear-gradient(-45deg, transparent 15px, #3b3 0) bottom right,
linear-gradient(45deg, transparent 15px, #3b3 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
资源网站搜索大全https://55wd.com
2、方案二:利用clip-path
.base{
width: 300px;height: 300px;
}
.chamfer{
background: #009EEB;
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曲线切口角的实现
上面实现的2种切口是直线的,如何实现曲线切口角呢?下面就介绍利用radial-gradient实现曲线切口角:
.chamfer{
background: #e72;
background: radial-gradient(circle at top left, transparent 15px, #e72 0) top left,
radial-gradient(circle at top right, transparent 15px, #e72 0) top right,
radial-gradient(circle at bottom right, transparent 15px,#e72 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #e72 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
使用Corner-shape
除了上面写的方法外,我们还可以使用插件Corner-shape来实现,Corner-shape这个插件很有意思,能够生成元素的角形状,比如圆角、反向圆角、矩形、直角的边角,使用SVG技术生成,使用上只需要设置预设的自定义属性,然后设置圆角边框的大小即可。 Corner-shape的使用链接:http://wenjiangs.com/wp-content/uploads/2017/06/corner-shape/
例如:
corner-shape:bevel;
border-radius:10% / 30px;
width:400px;
height: 300px;