設(shè)計圖含有斜切角的效果時，我們一般想到的方法是切出四個角為背景，然后用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>

資源網(wǎng)站搜索大全https://55wd.com

2、方案二：利用clip-path

<style>
.base{
	 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曲線切口角的實現(xiàn)

上面實現(xiàn)的2種切口是直線的，如何實現(xiàn)曲線切口角呢？下面就介紹利用radial-gradient實現(xiàn)曲線切口角：

<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來實現(xiàn)，Corner-shape這個插件很有意思，能夠生成元素的角形狀，比如圓角、反向圓角、矩形、直角的邊角，使用SVG技術(shù)生成，使用上只需要設(shè)置預(yù)設(shè)的自定義屬性，然后設(shè)置圓角邊框的大小即可。 Corner-shape的使用鏈接：http://wenjiangs.com/wp-content/uploads/2017/06/corner-shape/

例如：

corner-shape:bevel;
border-radius:10% / 30px;
400px;
height: 300px;

　　

總結(jié)

以上是生活随笔為你收集整理的css3 斜切角/斜边的实现方式来自BAT大神的出品的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。