CSS实现多种图案

1.圆形

原理：上下左右都是圆角且为宽高一半

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

2.椭圆形

原理：块级元素为宽高比为2:1的矩形，border-radius为宽度的一半除以高度的一半

    .oval{
        width: 200px;
        height: 100px;
        background-color: green;
        border-radius: 100px/50px;
    }

3.三角形

原理：块级元素不设置宽高，border设置左右下为透明即可

    .Triangle{
        width: 0px;
        height: 0px;
        border-top: 100px solid yellow;
        border-bottom: 100px solid transparent;
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
    }

4.菱形

原理：块元素为正方形，以左下角为基准点逆时针旋转45度

    .dismond{
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
    }

5.梯形

原理：设置宽度不设置高度，将左右边框设置成下边框的一半，并透明显示

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

6.双三角

原理：两个块元素实现三角形，但是不能设置左边框，否则两个三角形之间会有间隔

    .Triangle1,.Triangle2{
        width: 0;
        height: 0;
        border-bottom: 50px solid transparent;
        border-top: 50px solid transparent;
        border-right: 50px solid red;
        float: left;
    }

7.平行四边形

原理：倾斜函数的使用，一个参数时代表水平方向倾斜角度，两个参数时一个代表水平方向倾斜角度，一个代表垂直方向倾斜参数

    .Parallelogram{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        transform: skew(160deg);
    }

8.五边形

原理：可以分为两部分，上边是梯形，下边是三角形

    .Pentagon1{
        width: 100px;
        height: 100px;
        border-bottom: 50px solid purple;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }
    .Pentagon2{
        width: 0;
        height: 0;
        border-bottom: 100px solid transparent;
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-top: 100px solid red;
    }

9.半圆

原理：设置border-radius上和右为宽度一半

    .Semicircle{
        width: 100px;
        height: 50px;
        background-color: green;
        border-radius: 50px 50px 0 0;
    }

10.扇形

原理：由两部分组成，上边为半圆，下边为三角形

    .Sector1{
        width: 100px;
        height: 50px;
        background-color: orange;
        border-radius: 50px 50px 0 0;
    }
    .Sector2{
        width: 0;
        height: 0;
        border-bottom: 50px solid transparent;
        border-top: 50px solid orange;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }