css3怎樣在HTML網頁寫三角形呢
用css3在HTML寫三角，看似很簡單，但是還是有許多地方值得我們注意的哦。今天咪咪我就來分享一下用css3寫三角的指南，一起來看看吧！
工具/材料
電腦
sublime
搜狗瀏覽器
操作方法
-
01
如圖，新建一個HTML5網頁，然后設置一個div，一般來說，我們是通過div來寫三角的。
-
02
接著開始在style標簽里面設置div的樣式，把div設置成三角形。
-
03
如圖，設置div的width為0,這一點特別重要，待會我再具體分析。
-
04
然后設置border為25像素，solid表示實線，然后邊框的顏色是白色的。
-
05
接著我們再另外設置border-bottom-color為紅顏色。
-
06
保存好之后，就可以得到一個紅色的三角形了，這個三角形其實就是下邊框，而上邊框和左邊框以及右邊框因為是白色的，所以看不出來。這樣就會給人三角形的感覺。
-
07
接著我們把border中的25px給改成5px,然后保存。
-
08
這時候刷新HTML網頁，可以看到，三角形變小了，這就說明通過border，我們可以控制三角形的大小。
-
09
接著我們把width:0注釋掉，然后保存HTML網頁。
-
10
在瀏覽器刷新HTML，可以看到原來的三角形已經不再是三角形了，這是因為如果不設置width為0，那么默認width就會自動填滿整個瀏覽器哦。
-
11
接著我們把border-bottom-color改為border-top-color，然后再保存。
-
12
這時候，三角形就倒過來了，此外，我們還可以通過border-left-color和border-right-color來設置左三角形和右三角形哦。
- End
- 發表于 2017-08-25 00:00
- 閱讀 ( 962 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章