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 solid red;border-left:50px solid transparent;border-right:50px solid transparent;}.six::before {top:-20px;}.six::after{transform: rotate(180deg);top:55px;}

代码实现：

（3）十二边形
这个就是简单的，三个正方形的叠加，注意角度就好~
具体代码：

 .burst {position:relative;width: 100px;height: 100px;margin:100px auto;background-color: red;}.burst::before {content:'';width: 100px;height: 100px;margin:100px auto;background-color: red;position:absolute;top:-100px;left:0;transform: rotate(30deg);}.burst::after {content:'';width: 100px;height: 100px;margin:100px auto;background-color: red;position:absolute;top:-100px;left:0;transform: rotate(70deg);}

代码实现：

（4）绘制箭头
这个箭头，有一些复杂，主要是在位置。是一个三角形，与一个长方形的拼接。长方形需要尾端相连，并且进行弯曲，利用border-radius属性就好。
具体代码：

  #curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;transform: rotate(10deg);}#curvedarrow:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;transform: rotate(45deg);}

代码实现：

（5）不知道叫什么
这是舍友叫我画的~ 就是正方形里面有一个圆形，但是只显示边上的角。其实就是画一个圆，再显示两个角，其余两个角，进行遮盖。亲测可以在上面加元素。只不过要注意元素的层级关系~
具体代码：

 .box {width: 120px;height: 120px;border:2px solid black;background-color:pink;margin:100px auto;/*border-right: 40px solid red;*/position:relative;transform: rotate(-90deg);z-index:999;}.box::after {content:'';width: 60px;height: 120px;background-color: white;position:absolute;top:0;left:0;}.box::before {content:"";width: 120px;height: 120px;border-radius: 50%;background-color:white;position:absolute;top:0px;left:0px;z-index: 1;}

代码实现：

（6）绘制桃心
桃心啊，就是一边圆角一边直角，看图就知道啦~
具体代码：

  #heart {width: 300px;height: 300px;/*background-color:black;*/position:relative;margin:100px auto;}#heart::before {content:'';width: 60px;height: 100px;background-color: red;position:absolute;top:0;left:0;border-radius:40px 40px 0 0;transform:rotate(40deg);}#heart::after {content:'';width: 60px;height: 100px;background-color: red;position:absolute;top:2px;left:-28px;border-radius:40px 40px 0 0;transform:rotate(-50deg);}

代码实现：

（7）绘制绳子结
设置一边的圆角为0 ，然后进行旋转拼接就好啦.需要设置边框~
具体代码：

 .box{width: 200px;height: 200px;/*background-color:red;*/margin: 100px auto;position:relative;}.box::after {width: 50px;height: 50px;/*设置宽高之后 才会有边框 凹陷*/content:'';border:10px solid black;border-radius:38px 0 38px 38px;position:absolute;top:0;left:0;transform:rotate(45deg);}  .box::before {width: 50px;height: 50px;/*设置宽高之后 才会有边框 凹陷*/content:'';border:10px solid black;border-radius:40px 0 40px 40px;position:absolute;top:0;left:85px;transform:rotate(225deg);}

代码实现：

（9）绘制钻石
是一个梯形和三角形的拼接哦~
具体代码：

.diamond {width: 0px;/*height: 0;  设置宽度是为了不与浏览器同宽*/border-top:60px solid red;border-bottom:60px solid transparent;border-left:60px solid transparent;border-right:60px solid transparent;margin:100px auto;position:relative;/*三角形*/}.diamond::after {content:'';width: 60px;border-top:30px solid red;border-bottom:30px solid transparent;border-left:30px solid transparent;border-right:30px solid transparent;position:absolute;top:-120px;left:-60px;transform:rotate(180deg);}

代码实现：

（9）绘制吃豆人
一个吃豆人，有两种方法。可以一个盒子与一个伪元素的合作，也就是伪元素遮盖住一个边。但是反方向想。那不是可以给四个边框设置圆角，然后其中一个是transparent属性啊~
具体代码：

 .eat{width: 0px;position:relative;margin:100px auto;/*height: 100px;*/}.eat::before {content:'';border-left:40px solid red;border-right:40px solid transparent;border-top:40px solid red;border-bottom:40px solid red;position:absolute;border-radius:50%;}

代码实现：

（10）绘制太极图
emm，就是用边框先画一个圆，然后设置背景颜色。中间的校园就是边框画的哦。空心是因为宽高哦~，然后注意配色和定位就好啦
具体代码：

   .box{width: 210px;height: 100px;background-color:#ccc;border:2px solid black;border-radius:50%;/*此时浮上去半个圆  半圆的底色*/border-bottom-width:110px;position:relative;}/*伪类画圆环 并且定位*/.box::before {content:'';position:absolute;top:37px;left:0px;width: 20px;height: 20px;/*background-color:red;*/border-radius: 50%;border:43px solid black;}.box::after {content:'';position:absolute;top:58px;left:104px;width: 20px;height: 20px;/*background-color:red;*/border-radius: 50%;border:43px solid #ccc;}

代码实现：

（11）一个锁
很简单的拼接~ 不说了，猜吧~

下次再来更新~~~ 还是css~~ 再画几个，我就去挖掘canvas了。最近还要多看看ES6！！emm~