CSS3實現(xiàn)缺角矩形，折角矩形以及缺角邊框
發(fā)布時間：2019-12-20 16:47:26 作者：orangleLi 
我要評論
我要評論這篇文章主要介紹了CSS3實現(xiàn)缺角矩形，折角矩形以及缺角邊框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
前幾天偶然看到缺角矩形這個功能，腦袋中第一想法是，搞個絕對定位的偽元素，哪里需要擋哪里，或者找UI小哥聊聊天，忽然靈光一閃，想起之前翻過的《CSS揭秘》一書，記得有這個篇章，遂有了此文。
話不多說，放個效果圖先
缺角
1. 偽元素實現(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;
}
用偽元素畫一個和背景色相同的三角形，然后絕對定位到需要遮擋的地方，如下圖，但是這個最多只能弄兩個缺角
2. 漸變實現(xiàn)
CSS語法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
| 值 | 描述 |
|---|---|
| direction | 用角度值指定漸變的方向（或角度）。 |
| color-stop1, color-stop2,... | 用于指定漸變的起止顏色。 |
并且漸變可以接受一個角度（比如45deg）作為方向，而且色標的位置信息也可以是絕對的長度值。
45deg: 表示從左下到右上的方向
-45deg: 表示從右下到左上的方向
......
<div class="bg missAngle"></div>
.missAngle{
background: linear-gradient(-45deg, transparent 10px, #58a 0);
}
實現(xiàn)多個角
<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 瀏覽器不支持漸變。
這里有一個問題，拉動瀏覽器，當寬度被擠壓，小于定義寬度時，可能會出現(xiàn)白色的縫隙，這里需要注意一下下，如下圖
當背景圖是一張圖片的時候，這時實現(xiàn)缺角的話漸變就不好使了，接下來請出clip-path
clip-path實現(xiàn)
clip-path CSS 屬性可以創(chuàng)建一個只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內的部分顯示，區(qū)域外的隱藏。
clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)
x y, x1 y1, x2 y2, x3 y3, ... 這些表示坐標軸中的點，根據(jù)所有的點繪制一個封閉的圖形
<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不可，具體兼容性請看 這里
如果項目需要考慮兼容性問題，也可以放一張圖片當作背景圖，圖片壓縮一下，或者只有最多兩個缺角使用偽元素，根據(jù)項目實際情況選擇合適自己的方案
缺角邊框
<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的值為最終呈現(xiàn)的邊框的寬度
折角
還是使用漸變linear-gradient實現(xiàn)，在缺角矩形的基礎上多了一個折角
效果圖如下：
首先實現(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 這個三角形是一個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);
}
這樣子看起來有點兒不真實，并且現(xiàn)實中折角不一定都是45°
下面畫一個30°的折角，先畫一個缺角矩形
<div class="bg foldingAngle2"></div>
.foldingAngle2{
margin-top: 30px;
position: relative;
border-radius: .3em;
background: linear-gradient(-150deg, transparent 1em, #58a 0);
}
接下來畫折角
根據(jù)上圖紅色數(shù)字，折角寬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 */
}
這樣子就是最終的效果
改變角度和長寬計算有些麻煩，可以使用預處理器@mixin,這里只說一下過程，不多敘述
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了一文教你玩轉CSS border(邊框),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-19
這篇文章主要介紹了CSS 奇思妙想邊框動畫效果的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-18
這篇文章主要介紹了CSS3 按鈕邊框動畫的實現(xiàn)，幫助大家更好的理解和使用CSS3，美化自身網頁，感興趣的朋友可以了解下2020-11-12
這篇文章主要介紹了CSS3 實現(xiàn)發(fā)光邊框特效，幫助大家更好的理解和制作CSS3特效，美化自身網頁，感興趣的朋友可以了解下2020-11-11
兩款純CSS3鼠標經過按鈕邊框動畫特效是一款純CSS3實現(xiàn)的邊框按鈕特效，鼠標經過或者懸停的時候顯示邊框動畫效果。2020-11-09
這篇文章主要介紹了一篇文章帶你學習CSS3圖片邊框,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-04
css3多種邊框懸停按鈕填色動畫特效是一款簡單的長方形邊框按鈕，鼠標移入各種遮罩變色動畫特效。本腳本為css3+jquery特效腳本，喜歡大家喜歡2020-08-13
這篇文章主要介紹了css 透明邊框background-clip妙用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-12-25
這篇文章主要介紹了CSS邊框長度控制功能的實現(xiàn),代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-27
本文分兩種場景給大家介紹CSS實現(xiàn)半透明邊框與多重邊框效果，感興趣的朋友跟隨小編一起看看吧2019-11-13
