用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 【css3怎樣在HTML網頁寫三角形呢】這時候 ， 三角形就倒過來了 ， 此外 ， 我們還可以通過border-left-color和border-right-color來設置左三角形和右三角形哦 。






以上內容就是css3怎樣在HTML網頁寫三角形呢的內容啦 ， 希望對你有所幫助哦！

猜你喜歡

• 安卓手機如何設置休眠時間
• 茶花在北方的養殖方法，光照充足并養分充足
• 天竺葵的養殖技巧：澆水最好在清晨進行
• 怎樣用“塊根法”生產花毛茛盆花
• 玉米退化，與卡介苗的發明
• Apex英雄怎么關閉好友邀請游戲提示聲音在哪屏蔽
• 泰山在哪個省 泰山最佳旅游時間
• 廈門北站在哪里 廈門北站的位置
• 如何在PPT中插入PDF文件
• 怎樣在C++實現用下標為負數的數組計數排序