...雖然是一個(gè)很小的問題,但其實(shí)還是挺實(shí)用的。

實(shí)現(xiàn)一個(gè)邊框外的角。

用純CSS來寫。

一開始實(shí)現(xiàn)的效果是這個(gè)樣子的。

但是這個(gè)效果沒有辦法給他附帶陰影，所以換了一種寫法。實(shí)現(xiàn)成了這個(gè)樣子

想要實(shí)現(xiàn)這個(gè)小三角形，不適用icon ，用純CSS寫，其實(shí)是利用了border的特性來實(shí)現(xiàn)的。

..之前都不曉得，后來有人告訴我之后，自己研究了一下才明白的。

雖然網(wǎng)上講的人很多，但是我覺得把自己的收獲記錄下來才是最棒的。

我們先來看看border是什么樣子的吧！

我們?yōu)橐粋€(gè)長寬10px大小的盒子定義了30px的上下左右的邊框

.border{width:10px;height:10px;border-top:30px solid red;border-left:30px solid blue;border-right:30px solid green;border-bottom:30px solid yellow;

}

他的邊框的邊與邊的交接是斜的！！

就是利用斜邊，我們就可以畫出三角形了！

首先我們將盒子歸零。

然后把其中三邊變透明，就可以看到一個(gè)三角形出現(xiàn)啦！

.border{width:0px;height:0px;border-top:30px solid transparent;border-left:30px solid blue;border-right:30px solid transparent;border-bottom:30px solid transparent;

}

但是...這并不能解決邊框陰影的問題，因?yàn)槿绻由详幱?#xff0c;效果就成這個(gè)樣子了。

，陰影把我剛剛隱藏起來了的邊框又顯現(xiàn)出來啦！

這個(gè)時(shí)候如果想要實(shí)現(xiàn)三角形的邊也有陰影，其實(shí)大佬們都已經(jīng)知道了...再畫一個(gè)三角形就好了...

再畫一個(gè)border-top ；然后把圖形旋轉(zhuǎn)135°，再改變box-shadow的位置，就可以實(shí)現(xiàn)剛剛的效果啦。

最后貼一段源碼，大家可以自己去嘗試嘗試哦！

.Father{position:relative;width:200px;height:100px;background-color:#fafafa;box-shadow:0 0 5px #444;border-radius:4px;

}.ThreeC{position:absolute;top:30px;right:-30px;width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid #fafafa;border-left:20px solid #fafafa;border-right:20px solid transparent;transform:rotate(-135deg);box-shadow:0px 0px 5px #444;

}

a

總結(jié)

以上是生活随笔為你收集整理的html css 科技感异形边框,CSS边框外的小三角形+阴影效果的实现。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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