2021-08-13 css3绘制三角形

之前工作都是js写的多，很少写css，发现自己很多c3的高级知识不会了，补习一下，也就是看着w3school高级教程学习一下

<div class="tranle1"></div>

.tranle1{
    width: 0;
    border: 100px solid;
    border-color: red green blue yellow;
}

image.png

如果要绘制某个方向的三角形，那么就将其他方向的边框颜色设置为透明即可
以下为绘制一个左侧的三角形

.tranle1 {
    width: 0;
    border: 100px solid;
    border-color: #ff000000 #00800000 #0000ff00 yellow;
}

image.png

如果想绘制任意方向的三角形，那么也很简单，加上旋转的属性即可

.tranle1 {
    width: 0;
    border: 100px solid;
    border-color: #ff000000 #00800000 #0000ff00 yellow;
    transform: rotate(239deg);
}

image.png