用CSS画出三角形

最新推荐文章于 2024-06-19 14:48:22 发布

qq_30252219

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量204

点赞数 1

分类专栏： css 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_30252219/article/details/54882696

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我是正在学习前端的菜鸟，哈哈准备将这里做一些自己的学习笔记。今天看教程看到用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，会怎么样呢？](https://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);
}