Zhuxb's Blog
AboutPostsGithub

如何画一个三角形

Css

代码如下：

.tri{
    /* margin:  0 auto; */
    width: 0;
    height: 0;
    /* border-top  : 100px solid skyblue; */
    /* border-right: 100px solid rebeccapurple; */
    border: 100px solid transparent;
    border-bottom: 200px solid rgb(35, 134, 138);
    /* border-left: 100px solid rgb(235, 188, 135); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
}

原理也很简单，设置div大小为0，border设置成100，此时可以得到一个沿对角线等分成四份的正方形

image-20220308181435045

然后再将其中三边变成透明的border: 100px solid transparent;

image-20220308181504663

同理也可以得到梯形、扇形radius。