用css绘制各种图形

1、三角形 [triangle]

推导过程：

<style>
        .triangle {
            width: 10px;
            height: 10px;
            border: 50px solid;
            /* 上右下左 */
            border-color: red yellow blue green;
        }
    </style>

    <div class="triangle"></div>

效果：

把width宽和height 高改成0后的效果：

例如需要向下的三角：

border-color: red transparent transparent transparent;

效果：

2、平行四边形 [parallel]

<style>
        .parallel {
            /* margin-top 和 margin-left 不影响平行四边形的形成，腾位置的作用 */
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 100px;
            background: red;
            transform: skew(-20deg, 0);
        }
    </style>

<div class="parallel"></div>

效果：

对skew属性的理解

skew(-20deg, 0)，长方形以a边顺时针旋转20°，b边不动；

skew(0, 20deg)，长方形以b边顺时针旋转20°，a边不动；

3、圆形[circular]

    <style>
        .circular {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 100px auto;
            /* 正方形边长的一半，半径为50px的圆形 */
           /* border-radius: 50px; */
           /* 也可以设置为50%，也是半径为正方形边长一半的圆形 */
           border-radius: 50%;
        }
    </style>

    <div class="circular"></div>

效果图：

4、圆角矩形[rounded rectangle]

<style>
        .roundedRectangle {
            width: 300px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            /* 长方形高度的一半 */
            border-radius: 50px;
        }
    </style>

<div class="roundedRectangle"></div>