接着上一次的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~