您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)CSS3實(shí)現(xiàn)缺角矩形、折角矩形以及缺角邊框的案例,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
效果圖:
缺角
1. 偽元素實(shí)現(xiàn)
<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; }
用偽元素畫一個(gè)和背景色相同的三角形,然后絕對(duì)定位到需要遮擋的地方,如下圖,但是這個(gè)最多只能弄兩個(gè)缺角
2. 漸變實(shí)現(xiàn)
CSS語(yǔ)法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值 | 描述 |
---|---|
direction | 用角度值指定漸變的方向(或角度)。 |
color-stop1, color-stop2,... | 用于指定漸變的起止顏色。 |
并且漸變可以接受一個(gè)角度(比如45deg)作為方向,而且色標(biāo)的位置信息也可以是絕對(duì)的長(zhǎng)度值。
45deg: 表示從左下到右上的方向
-45deg: 表示從右下到左上的方向
......
<div class="bg missAngle"></div>
.missAngle{ background: linear-gradient(-45deg, transparent 10px, #58a 0); }
實(shí)現(xiàn)多個(gè)角
<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 瀏覽器不支持漸變。 */ }
這個(gè)實(shí)際上使用四個(gè)圖形拼接出來(lái)的,如下圖
background-size: 50% 50%; 表示每個(gè)小圖形寬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 瀏覽器不支持漸變。
這里有一個(gè)問(wèn)題,拉動(dòng)瀏覽器,當(dāng)寬度被擠壓,小于定義寬度時(shí),可能會(huì)出現(xiàn)白色的縫隙,這里需要注意一下下,如下圖
當(dāng)背景圖是一張圖片的時(shí)候,這時(shí)實(shí)現(xiàn)缺角的話漸變就不好使了,接下來(lái)請(qǐng)出clip-path
clip-path實(shí)現(xiàn)
clip-path CSS 屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示,區(qū)域外的隱藏。
clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)
x y, x1 y1, x2 y2, x3 y3, ... 這些表示坐標(biāo)軸中的點(diǎn),根據(jù)所有的點(diǎn)繪制一個(gè)封閉的圖形
<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
將對(duì)應(yīng)的點(diǎn)連接起來(lái)就構(gòu)成了一個(gè)缺角矩形
clip-path的功能還是蠻強(qiáng)大的,繪制各種各樣的形狀,菱形,五角星啊等等,比如下圖
<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%); /* 可以簡(jiǎn)寫 */ /* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */ /* inset使用四個(gè)值(對(duì)應(yīng)“上 右 下 左”的順序)來(lái)設(shè)置圓角半徑。 */ }
用來(lái)做動(dòng)畫
<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的部分功能,更多形狀點(diǎn)這里 ,一個(gè)用來(lái)生成各種形狀(包括隨意拖拉自定義)并且可以直接生成代碼的網(wǎng)站。
雖然這個(gè)能繪制各式形狀,但是兼容性卻不怎么好,谷歌版本79,火狐71測(cè)試正常,IE不可,具體兼容性請(qǐng)看 這里
如果項(xiàng)目需要考慮兼容性問(wèn)題,也可以放一張圖片當(dāng)作背景圖,圖片壓縮一下,或者只有最多兩個(gè)缺角使用偽元素,根據(jù)項(xiàng)目實(shí)際情況選擇合適自己的方案
缺角邊框
<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; }
效果如下:
兩個(gè)缺角矩形疊加的效果,內(nèi)部矩形寬高跟隨父div大小,只要保持垂直居中就好,padding的值為最終呈現(xiàn)的邊框的寬度
折角
還是使用漸變linear-gradient實(shí)現(xiàn),在缺角矩形的基礎(chǔ)上多了一個(gè)折角
效果圖如下:
首先實(shí)現(xiàn)第一種
<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 這個(gè)三角形是一個(gè)45°的直角三角形,直角邊長(zhǎng)1.4em, 斜邊長(zhǎng)為 1.4/√2 ≈ 1
所以繪制一個(gè)缺角為1em的矩形
linear-gradient(-135deg, transparent 1em, #58a 0) -135deg 朝左下方向繪制一個(gè)缺角矩形
兩次漸變重疊,所以效果圖為:
一定要先畫小三角,再畫缺角矩形,否則矩形會(huì)蓋住小三角
右下角折角
<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); }
這樣子看起來(lái)有點(diǎn)兒不真實(shí),并且現(xiàn)實(shí)中折角不一定都是45°
下面畫一個(gè)30°的折角,先畫一個(gè)缺角矩形
<div class="bg foldingAngle2"></div>
.foldingAngle2{ margin-top: 30px; position: relative; border-radius: .3em; background: linear-gradient(-150deg, transparent 1em, #58a 0); }
接下來(lái)畫折角
根據(jù)上圖紅色數(shù)字,折角寬2/√3 ≈ 1.15em 長(zhǎng):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; }
旋轉(zhuǎn)一下
.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; /* 讓三角形的右下角成為旋轉(zhuǎn)的中心 */ }
上移一下,偏移量為2-1.15=0.85em,再加點(diǎn)陰影
.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 */ }
這樣子就是最終的效果
關(guān)于“CSS3實(shí)現(xiàn)缺角矩形、折角矩形以及缺角邊框的案例”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。