CSS开发三角形椭圆形等形状

椭圆形

.ellipse{
        width: 200px;
        height: 100px;
        background: #42b983;
        border-radius: 200px/100px;
    }

上三角形

.ellipse{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #434355;
    }

下三角形

.ellipse{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #434355;
    }

左三角形

.ellipse{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid #434355;
    }

右三角形

.ellipse{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid #434355;
    }

左上三角

.ellipse{
        width: 0;
        height: 0;
        border-top: 100px solid #434355;
        border-right: 100px solid transparent;
    }

右上三角

.ellipse{
        width: 0;
        height: 0;
        border-top: 100px solid #434355;
        border-left: 100px solid transparent;
    }

左下三角

.ellipse{
        width: 0;
        height: 0;
        border-bottom: 100px solid #434355;
        border-right: 100px solid transparent;
    }

右下三角

.ellipse{
        width: 0;
        height: 0;
        border-bottom: 100px solid #434355;
        border-left: 100px solid transparent;
    }