技術標籤：csscss3css

橢圓形

.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;
    }