用CSS画出三角形

我是正在学习前端的菜鸟，哈哈准备将这里做一些自己的学习笔记。今天看教程看到用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> }`  .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; }

根据上面的我们可以受到启发，如果要画出三角形，可以选择把四边的边界只留下一边就可以是三角形了。

.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); }

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

---

第一次写博客，写完还有点小激动~希望我可以经常写，督促自己学习。如果有什么不对的地方，希望有看到的宝宝们可以告诉我~