设计图含有斜切角的效果时，我们一般想到的方法是切出四个角为背景，然后用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;
}
</style>
<div class="chamfer" ></div>

效果如下：

2、方案二：利用clip-path

<style>
.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
   		);
}
</style>
<div class="chamfer"></div>

效果如下：

css曲线切口角的实现 

上面实现的2种切口是直线的，如何实现曲线切口角呢？下面就介绍利用radial-gradient实现曲线切口角：

<style>
.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;
}
</style>
<div class="chamfer"></div>

效果如下：

使用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;

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/714