css画三角形、扇形、梯形

思路：div不设置宽高，使用border填充颜色，border争位置渲染成三角形，再删除对边border，左右两边颜色设置透明即可。

1、三角形

1、首先，不设置宽高，设置边得出结果如下图：

.container {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid yellow;
    border-bottom: 50px solid green;
    border-right: 50px solid black;
}

 2、删除上边border

.container {
     width: 0;
     height: 0;
     border-left: 50px solid yellow;
     border-bottom: 50px solid green;
     border-right: 50px solid black;
}

3、左右两边颜色设置透明

.container {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-bottom: 50px solid green;
     border-right: 50px solid transparent;
}

2、扇形

扇形同理，只需要增加一个50%的圆角，三角形即可变为扇形

.container {
    width: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-radius: 50%;
}

3、梯形

思路：给div一个宽度，再根据border之间的边界线是斜线，删除对边border，左右设置透明即可，相对于三角形，只是增加了一个content的宽度

.container {
    width: 50px;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}