用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机制