html知識點之利用css四邊形切角并且加上邊框

html知識點之利用css四邊形切角并且加上邊框

前言

這幾個月做了很多前端工作，其中一個需求還是蠻頭疼，UI給的圖上面的四邊形是一個帶斜邊的，直接用背景圖可以實現(xiàn)，但是會出現(xiàn)各種布局的問題，比如內(nèi)容太大了，邊框不會跟著擴大，廢話不多說，這里寫一些如何利用css話四邊形帶有斜邊，并且給斜邊加邊框，在這之前，先簡單說一下需要用到的函數(shù)

linear-gradient()函數(shù)

#grad {

background-image: linear-gradient(red, yellow, blue);

}

看上面的代碼是從頭部開始的線性漸變，從紅色開始，轉(zhuǎn)為黃色，再到藍色。

這里大概就知道了linear-gradient是用來畫漸變用的。并且可以指定顏色以及方向。

clip-path函數(shù)

這個函數(shù)我也不是很懂，大概就是裁剪路徑，配合函數(shù)后面的做標(biāo)參數(shù)，對四邊形進行裁剪，這里是配合polygon使用。

實現(xiàn)代碼

clip-path: polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),

calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);

background:linear-gradient(-45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom right,

linear-gradient(45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom left,

linear-gradient(135deg,#4C829A 0px, rgba(216,236,255,0.05) 0) top left,

linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;

background-repeat: no-repeat;

border: solid 1px #4C829A;

上

面這個樣式就可以實現(xiàn)了，這是我實現(xiàn)的效果。

注意，我不光實現(xiàn)了切角，還實現(xiàn)了，切角以后，邊框也貼著斜邊。

代碼解釋

background:linear-gradient(-45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom right,

linear-gradient(45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom left,

linear-gradient(135deg,#4C829A 0px, rgba(216,236,255,0.05) 0) top left,

linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;

先解釋這個代碼。 linear-gradient最后面的是方向，這里有四個方向。不細說了、

其中第一個參數(shù)135deg就是角度，比如 top right;即上到右，切-135度，

第二個參數(shù)是4C829A 是邊框的邊框的顏色，

第三個參數(shù)0px，是你要切多高。這個地方經(jīng)過演算，是這里的值，看圖。

虛線部分即為你設(shè)置的值，這個值是以頂點為起點，45度角延長，

第四個參數(shù),rgba(216,236,255,0.05) 前面三個是是四邊形的填充顏色，最后一個0.05是填充顏色的透明度，這里也可以設(shè)置background-size: 50% 50%;意思即為將四邊形平均分為四分，每一份的顏色可以單獨設(shè)置，這里不做深究，這里我也沒用到

第五個參數(shù)0表示漸變渲染顏色，這里寫0，表示不讓他漸變渲染，如果需要漸變渲染顏色，并且四邊形需要不同的顏色，就可以用到上面的background-size屬性。

第六個屬性 top right表示方向。代表你要從哪里往哪里切

上面說了第一個要點，能夠?qū)崿F(xiàn)四邊形切邊，但是邊框還是四邊，沒有切邊。

clip-path: polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),

calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);

這段代碼，可以通過裁剪的方式，實現(xiàn)邊框也跟著切邊。

經(jīng)過反復(fù)實驗，發(fā)現(xiàn) polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),

calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);中的八個點，按照順序，分別是圖中的1-8，好像沒什么規(guī)律，這里可能會有問題，具體大家可自行演算。可以看到，我切的斜邊是右上角，就是切2號點和3號點。2號點的坐標(biāo)本來是100%和0，其控制的是上面那條邊的右邊坐標(biāo)點，這里減去15px，就是切割后的坐標(biāo)點，3號點位同理，縱坐標(biāo)切15px，然后可以大概算出沿著直角三角形做垂直線，大概可以算出其距離時10.6px。也就是 linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;這里設(shè)置的10px(大致結(jié)果)，下面這張圖，可以幫助大家理解怎么算的。

當(dāng)然，你也可以先設(shè)置你要切多少個px，然后算出坐標(biāo)值是多少。但是這個算出來的結(jié)果，可能跟實際效果還是有所出入，具體還需要自己在計算值得上下進行調(diào)整

html知識點之利用css四邊形切角并且加上邊框相關(guān)教程

總結(jié)

以上是生活随笔為你收集整理的html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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