使用CSS画一个实心三角形

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

//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.去除背景颜色

代码改成

 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(透明)

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

效果如图

到这里我们的三角形已经完成啦，如果想画一个尖角朝上的三角形，只需要把上左右的颜色改为transparent,以此类推

最后

以上就是炙热故事为你收集整理的使用CSS画一个实心三角形的全部内容，希望文章能够帮你解决使用CSS画一个实心三角形所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。