使用CSS画一个实心三角形

128 阅读 0 评论 85 点赞

我是靠谱客的博主炙热故事，这篇文章主要介绍使用CSS画一个实心三角形，现在分享给大家，希望可以做个参考。

首先我们先写一个宽高都为100px，带20px边框的div盒子

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//html
<div>
</div>
//css
 div {
            width: 100px;
            height: 100px;
            border-left: 20px solid red;
            border-right: 20px solid green;
            border-top: 20px solid #000;
            border-bottom: 20px solid blue;
            background-color: rgb(228, 231, 47);
        }

效果如图所示
在这里插入图片描述
下面让我们一步步把它变成三角形
1.将宽高设置为0（不能直接不设置，否则宽会与父级元素一样）
2.去除背景颜色

代码改成

复制代码

1
2
3
4
5
6
7
8
9
 div {
            width: 0;
            height: 0;
            border-left: 20px solid red;
            border-right: 20px solid green;
            border-top: 20px solid #000;
            border-bottom: 20px solid blue;
        }

效果如图
在这里插入图片描述
3.将上下右的边框颜色改为transparent(透明)

复制代码

1
2
3
4
5
6
7
8
9
div {
            width: 0;
            height: 0;
            border-left: 20px solid red;
            border-right: 20px solid transparent;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }