首先我们先写一个宽高都为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,以此类推