css绘制常见的形状和图案

1.矩形

       
        .square{
            width: 100px;
            height: 50px;
            background: red
        }

2. 正方形

        .rectangle{
            width: 100px;
            height: 100px;
            background: red
        }

3.圆形

        .Circle{
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }

4.椭圆形

        .Oval{
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 50%;
        }

5.向下的三角形

        .Triangle{
            width: 0px;
            height: 0px;
            border-width: 50px;
            border-style: solid;
            border-color: red transparent transparent transparent

6.向左的三角形

    <style>
        .Triangle{
            width: 0px;
            height: 0px;
            border-width: 50px;
            border-style: solid;
            border-color:  transparent red transparent transparent
        }

7.左上三角形

        .Triangle{
            width: 0px;
            height: 0px;
            border-width: 50px;
            border-style: solid;
            border-color:  red  transparent transparent red
        }

8.沙漏

        .Triangle{
            width: 0px;
            height: 0px;
            border-width: 50px;
            border-style: solid;
            border-color:  red   transparent red
        }

9.梯形

        .Trapezoid{
            height: 0px;
            width: 100px;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

10.鸡蛋

        .egg{
            display:block;
            width: 126px;
            height: 180px;
            background-color: red;
            -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
            border-radius:50%  50%  50%  50%  / 60%   60%   40%  40%;            
        }