當(dāng)前位置：首頁(yè) >

css中border制作各种形状

發(fā)布時(shí)間：2023/12/2 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 css中border制作各种形状小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

css利用border制作各種形狀的原理如圖：

使用border繪制三角形是什么原理？事實(shí)上，寬度相等的border是以45度對(duì)接的，如下圖:

沒(méi)有了上border如圖所示：

?再設(shè)置border的寬度為0：

設(shè)置border的高度為0：如圖

最后設(shè)置左右border的顏色為透明，如下圖：

貼代碼，做個(gè)小三角形

看了這個(gè)大神的作品，感覺(jué)學(xué)到了好多。這個(gè)是展示的css的另一個(gè)屬性，clip-path.

https://segmentfault.com/a/1190000010936207

附上其中2個(gè)比較有用的鏈接

1.css利用邊框做各種樣子

https://css-tricks.com/examples/ShapesOfCSS/

2.利用clip-path做各種形狀，類(lèi)似svg

http://bennettfeely.com/clippy/

總結(jié)

以上是生活随笔為你收集整理的css中border制作各种形状的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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