css巧妙利用盒子---画图（二）

接着上一次的css的图画，这次画一些，稍微麻烦一点点的图形~

一、 画图

（1）绘制五角星
这个五角星是画的是真的好丑 还需要微调一下。绘制五角星，主要是思想。有可能会想到好几个盒子，也就是中间一个五边形，其余都是三角形。但是其实可以超简单的！！！ 主要是量化图形
具体代码：

 .star{
            position:relative;
            width:0px;
            margin:100px auto;
            border-right:160px solid transparent;
            border-top:80px solid red;
            border-left: 160px solid transparent;
            transform: rotate(-155deg);
        }
        .star::before{
            content:'';
            position:absolute;
            top:-87px;
            left:-145px;
            border-right:160px solid transparent;
            border-top:80px solid red;
            border-left: 160px solid transparent;
            transform: rotate(-53deg);
        }
        .star::after {
            content:'';
            position:absolute;
            top:-16px;
            left:0px;
            border-right:40px solid transparent;
            border-bottom:80px solid red;
            border-left: 40px solid transparent;
            transform: rotate(-206deg);
        }

代码结果：

五角星只用了一个盒子以及伪元素。接下来换个颜色就知道啦。

其实就是简单的，三个三角形，~

（2）绘制六边形
六边形是一个长方形和两个三角形的拼接啊~
具体代码：

.six {
            position:relative;
            width: 100px;
            height: 55px;
            background-color:red;
            margin:100px auto;
        }
        .six::before,.six::after {
            content:'';
            position:absolute;
            border-bottom: 20px soli