用CSS畫出三角形

2024-04-27 15:06:46

字體：大中小

來源：轉載

供稿：網友

我是正在學習前端的菜鳥，哈哈準備將這里做一些自己的學習筆記。今天看教程看到用CSS可以畫出三角形覺得很有意思，所以決定寫這篇文章啦~用CSS畫三角形主要是靠border的屬性來實現的。先寫一個空div,然后用css控制。`<div class="triangle"></div><style> .triangle{ width:100px; height:100px; border-width:50px; border-style:solid; border-top-color: red; border-left-color: yellow; border-bottom-color: blue; border-right-color: green;</style>}` ![把邊界的寬度設大一點仔細觀察，就會發現邊界的交界處是用斜線交接的。如果DIV不設寬高都為0，會怎么樣呢？](http://img.blog.csdn.net/20170205192309750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzAyNTIyMTk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast).a{ width:0px; height:0px; border-width:50px; border-style:solid; border-top-color: red; border-left-color: yellow; border-bottom-color: blue; border-right-color: green;}

如果div寬高設為0，就會有這樣的效果根據上面的我們可以受到啟發，如果要畫出三角形，可以選擇把四邊的邊界只留下一邊就可以是三角形了。但是如果只保留一條邊界的話會啥都沒有

.a{ width:0px; height:0px; border-top: 50px solid red;}

保留兩條邊界的話是這種效果

.a{ width:0px; height:0px; border-top: 50px solid red; border-left: 50px solid yellow; }

所以換一種思路，可以把邊界設置為透明。把左右下的邊界都設置成了透明

.a{ width:0px; height:0px; border-top: 50px solid red; border-left: 50px solid rgba(0,0,0,0); border-bottom: 50px solid rgba(0,0,0,0); border-right: 50px solid rgba(0,0,0,0);}

還可以是這樣的三角形

.a{ width:0px; height:0px; border-top: 50px solid red; border-left: 50px solid red; border-bottom: 50px solid rgba(0,0,0,0); border-right: 50px solid rgba(0,0,0,0);}

當然還可以其他位置的三角形，大家自行推敲吧~哈哈~

第一次寫博客，寫完還有點小激動~希望我可以經常寫，督促自己學習。如果有什么不對的地方，希望有看到的寶寶們可以告訴我~

上一篇：ES7 中使用 async/await 解決回調函數嵌套問題

下一篇：HTTP客戶端識別與Cookie機制