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