css实体三角形 |css js 在线压缩

.triangle-up{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000;
}

以上就是制作上三角形的CSS代码。通过设置元素的边框来实现三角形的效果。其中，宽度和高度需要设置为0，因为实际上这只是一个由边框组成的伪元素。另外，为了让三角形垂直居中，可以设置display: inline-block;。

.triangle-down{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}

这是制作下三角形的CSS代码。与上三角形类似，只需调整边框方向即可。

.triangle-right{
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000;
}

这是制作右三角形的CSS代码。需要将上下边框设为透明，同时将左边框设置为颜色值。

.triangle-left{
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000;
}

最后是制作左三角形的CSS代码。与右三角形类似，只需将左右边框互换即可。