CSS3實現缺角矩形、折角矩形以及缺角邊框的案例

這篇文章將為大家詳細講解有關CSS3實現缺角矩形、折角矩形以及缺角邊框的案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

效果圖：

缺角

1. 偽元素實現

<div class="bg cover"></div>

.bg{
  width: 120px;
  height: 80px;
  background: #58a;
} /* 下文元素都使用了此樣式 */

.cover{
    position: relative;
}
.cover::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
}
.cover::after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border: 5px solid #fff;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

用偽元素畫一個和背景色相同的三角形，然后絕對定位到需要遮擋的地方，如下圖，但是這個最多只能弄兩個缺角

2. 漸變實現

CSS語法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

并且漸變可以接受一個角度（比如45deg）作為方向，而且色標的位置信息也可以是絕對的長度值。

45deg: 表示從左下到右上的方向

-45deg: 表示從右下到左上的方向

......

<div class="bg missAngle"></div>

.missAngle{
    background: linear-gradient(-45deg, transparent 10px, #58a 0);
}

實現多個角

<div class="bg rect"></div>

.rect{
  background: linear-gradient(135deg, transparent 10px, #58a 0) top left,
          linear-gradient(-135deg, transparent 10px, #58a 0) top right,
          linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,
          linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  /* Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。 */
}

這個實際上使用四個圖形拼接出來的，如下圖

background-size: 50% 50%; 表示每個小圖形寬50%，高50%

弧形切角

<div class="bg cricle"></div>

.cricle{
  background: radial-gradient(circle at top left, transparent 10px, #58a 0) top left,
          radial-gradient(circle at top right, transparent 10px, #58a 0) top right,
          radial-gradient(circle at bottom right, transparent 10px, #58a 0) bottom right,
          radial-gradient(circle at bottom left, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

最后，Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。

這里有一個問題，拉動瀏覽器，當寬度被擠壓，小于定義寬度時，可能會出現白色的縫隙，這里需要注意一下下，如下圖

當背景圖是一張圖片的時候，這時實現缺角的話漸變就不好使了，接下來請出clip-path

clip-path實現

clip-path CSS 屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。

clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)

x y, x1 y1, x2 y2, x3 y3, ... 這些表示坐標軸中的點，根據所有的點繪制一個封閉的圖形

<div class="bg rect-clip"></div>

.rect-clip{
  background-image: url(./im.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 
    100% calc(100% - 15px), calc(100% - 15px) 100%,
    15px 100%, 0 calc(100% - 15px), 0 15px)
}

效果圖：

總寬度為120px
calc(100% - 15px)  =>  105px
100%               =>  120px

將對應的點連接起來就構成了一個缺角矩形

clip-path的功能還是蠻強大的，繪制各種各樣的形狀，菱形，五角星啊等等，比如下圖

<div class="bg clip5"></div>

.clip5{
  	margin-left: 30px;
    /*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/
    clip-path: inset(0 round 0 25%); /* 可以簡寫 */
    /* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */
    /* inset使用四個值（對應“上 右 下 左”的順序）來設置圓角半徑。 */
}	

用來做動畫

<div class="line-box">
	<div class="line line1"></div>
	<div class="line line2"></div>
	<div class="line line3"></div>
</div>

.line-box{ 	
	width: 100px;
	height: 60px;
}
.line{
	width: 100%;
	height: 100%;
	background: #26b91a;
}
.line1{
	-webkit-clip-path: polygon(80% 0, 40% 40%, 80% 80%);
	clip-path: polygon(80% 0, 40% 40%, 80% 80%);
	animation: a 2s 1s infinite;
}
.line2{
	clip-path: polygon(10% 10%, 60% 40%, 50% 90%);
	animation: b 2s 1s infinite;
}
.line3{
	clip-path: polygon(20% 20%, 30% 20%, 30% 50%, 20% 50%);
	animation: c 2s 1s infinite;
}
@keyframes a{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(50% 40%, 25% 100%, 75% 100%);
	}
}
@keyframes b{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(50% 0, 0% 100%, 100% 100%);
	}
}
@keyframes c{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
	}
}

這里只列舉了clip-path的部分功能，更多形狀點這里 ，一個用來生成各種形狀（包括隨意拖拉自定義）并且可以直接生成代碼的網站。

雖然這個能繪制各式形狀，但是兼容性卻不怎么好，谷歌版本79，火狐71測試正常，IE不可，具體兼容性請看 這里

如果項目需要考慮兼容性問題，也可以放一張圖片當作背景圖，圖片壓縮一下，或者只有最多兩個缺角使用偽元素，根據項目實際情況選擇合適自己的方案

缺角邊框
 

<div class="out-rect">
<div class="in-rect"></div>
</div>

.out-rect {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
padding: 5px;
background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.in-rect{
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}

效果如下：

兩個缺角矩形疊加的效果，內部矩形寬高跟隨父div大小，只要保持垂直居中就好，padding的值為最終呈現的邊框的寬度

折角

還是使用漸變linear-gradient實現，在缺角矩形的基礎上多了一個折角

效果圖如下：

首先實現第一種

<div class="bg foldingAngle"></div>

.bg{
  width: 120px;
  height: 80px;
  background: #58a;
}
.foldingAngle{
	background:
		linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em,
	    linear-gradient(-135deg, transparent 1em, #58a 0);
}

效果圖

linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em
朝左下方向，透明黑色各一半漸變繪制，位置: 100% 0   size: 1.4em 1.4em

如下：

size 為1.4em 1.4em 這個三角形是一個45°的直角三角形，直角邊長1.4em, 斜邊長為 1.4/√2 ≈ 1

所以繪制一個缺角為1em的矩形

linear-gradient(-135deg, transparent 1em, #58a 0)
-135deg 朝左下方向繪制一個缺角矩形

兩次漸變重疊，所以效果圖為：

一定要先畫小三角，再畫缺角矩形，否則矩形會蓋住小三角

右下角折角

<div class="bg foldingAngle2"></div>

.foldingAngle2{
	background:
		linear-gradient(to left top, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 100% / 1.4em 1.4em,
	    linear-gradient(-45deg, transparent 1em, #58a 0);
}

這樣子看起來有點兒不真實，并且現實中折角不一定都是45°

下面畫一個30°的折角，先畫一個缺角矩形

<div class="bg foldingAngle2"></div>

.foldingAngle2{
	margin-top: 30px;
    position: relative;
    border-radius: .3em;
	background: linear-gradient(-150deg, transparent 1em, #58a 0);
}

接下來畫折角

根據上圖紅色數字，折角寬2/√3 ≈ 1.15em 長：2em 畫出折角

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	border-bottom-left-radius: inherit;
}

旋轉一下

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	transform: rotate(-30deg);
	transform-origin: bottom right; /* 讓三角形的右下角成為旋轉的中心 */
}

上移一下，偏移量為2-1.15=0.85em，再加點陰影

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	transform: translateY(-0.85em) rotate(-30deg);
	transform-origin: bottom right;
	box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
	border-bottom-left-radius: inherit; /* 左下角繼承border-radius */
}

這樣子就是最終的效果

關于“CSS3實現缺角矩形、折角矩形以及缺角邊框的案例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。