好看的前端網頁大家見到的應該都不少

但是很多都是用圖片作為背景

今天我們就給大家講講怎么用css繪制圖形

(圖形如下)

----------------------------------------------------------------------

首先可以看到有一個div盒子

寬300個像素值

width: 300px;

高100個像素值

height: 100px;

邊框1個像素值并且是黑色的實線

border: 1px solid #000;

最后還有四個圓角大概30個像素值

border-radius: 30px;

(圓角像素值憑自行喜歡)

----------------------------------------------------------------------

接下來是三角形的繪制

也是我們今天的重點

這時候再建一個div盒子

高和寬的像素值都設置成沒有像素值，也就是0像素值

width:0px;height: 0px;

再將上方的圓角去掉

重點來了

接下來將上下左右的邊框設置為10個像素值 給個顏色就會如下

----------------------------------------------------------------------

那當我們去掉右邊框以及隱藏上下邊框時

先刪除掉右邊框

將上下的邊框改為隱藏

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

因為上方的div原因我們將圖片做了點修改

并且放大觀看效果

----------------------------------------------------------------------

這時候三角形已經出現了

聰明的小伙伴就知道接下來該怎么做了

那我也不費話

用li來做，然后懸浮起來 背景顏色改成左邊div盒子

最后把左外邊距調成負便好啦

不同方向的三角形刪除對邊，隱藏雙邊的邊框即可

而不同角度大小的三角形通過改變存在的像素值即可做到

具體的歡迎小伙伴討論提出問題哦

總結

以上是生活随笔為你收集整理的三角形css_使用css绘制三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。