如何用css制作各种图形，这篇文章告诉你
浏览数：
时间：2020-07-01
以前绘制图形只能通过一些图像编辑软件实现，对于一些复杂且不规则的图形，绘制起来非常的麻烦。但是现在使用CSS3就不用担心这个问题，它有一个非常方便的作用，那就是我们可以利用它绘制各种各样的图形，不管是规则的图形还是不规则的图形，都可以利用CSS3进行绘制，可以降低我们使用图片的频率。
利用CSS3绘制图形，你只需要掌握一些新增的CSS属性，比如transform、border-radius等，一些绘制起来比较麻烦的图形也可以轻松实现。
更值得大家注意的是，CSS能够对网页中元素位置的排版进行像素级精确控制，用css制作的图片不仅加载速度更快，还可以通过代码控制图形的大小以及颜色，方便后期修改。下面就教大家用css来制作一些简单又实用的图形。
圆形
圆形是比较常见的一个图形，那么如何利用CSS进行绘制呢？我们先写一个div盒模块，再设置一个ID。
<div id="circle"></div>
圆形很简单，让div盒模块宽高相等，然后设置border-radius属性为50%即可：
#circle{
width:150px;
height:150px;
background:#e4393c;
border-radius:50%;
}
正方形
正文形是最简单的了，只要设置宽高相等就可以了。
<div id="square"></div>
#square{
width:120px;
height:120px;
background:#99ffc0;
}
长方形
与正方形一样，CSS制作长方形也很简单，保证div模块的宽高不相等就行了：
<div id="rectangle"></div>
#rectangle{
width:220px;
height:120px;
background:#734490;
}
椭圆形
椭圆其实就是长方形的变身，只要在长方形的代码中把它变成加一个border-radius属性就可以了：
<div id="oval"></div>
#oval{
width:300px;
height:150px;
background:#e4393c;
border-radius:150px/75px;
}
三角形
三角形的制作，主要涉及到的知识点是border属性，只需要通过修改设置不同border的透明效果，就能实现出三角形状。此外，在制作三角形的过程中，宽度和高度都需要设置为0。
<div id="triangle"></div>
#triangle{
width:0;
height:0;
border-bottom:120px solid#e4393c;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
倒三角形
原理相同，只不过设置的是border-top、border-left和border-right三条边的属性，反向设置，就是倒过来的三角形了，就不做多余的解释：
#triangle{
width:0;
height:0;
border-top:120px solid#CCFF66;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
菱形
菱形看上去比较难，其实也很简单，只是把2个三角形接合在一起，就形成了菱形，这里要使用的是一个新的属性，叫transform，意为旋转，后面还有很多图形需要用到这个属性。
#diamond{
width:120px;
height:120px;
background:#CCFF66;
transform:rotate(-45deg);
transform-origin:0 10 0%;
margin:60px 0 10px 310px;
}
梯形
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#trapezium{
height:0;
width:120px;
border-bottom:120px solid#CCFF66;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
平行四边形
平行四边形也很简单，只是一个长方形，变倾斜了而已，先写一个长方形，再给它一个transform属性：
#parallelogram{
width:160px;
height:1 00px;
background:#CCFF66;
transform:skew(30deg);
}
星形
五角星是很复杂的图形，基本是css制作图形中最复杂的一个了。主要是通过使用transform属性和添加伪类的方式来实现的。
#star{
display:block;
width:0;
height:0;
margin:50px 0;
color:#fc2e5a;
position:relative;
border-right:10 0px solid transparent;
border-bottom:70px solid#fc2e5a;
border-left:10 0px solid transparent;
transform:rotate(35deg);
}
#star:before{
height:0;
width:0;
position:absolute;
display:block;
top:-45px;
left:-65px;
border-bottom:80px solid#fc2e5a;
border-left:30px solid transparent;
border-right:30px solid transparent;
content:'';
transform:rotate(-35deg);
}
#star:after{
content:'';
width:0;
height:0;
position:absolute;
display:block;
top:3px;
left:-105px;
color:#fc2e5a;
border-right:10 0px solid transparent;
border-bottom:70px solid#fc2e5a;
border-left:10 0px solid transparent;
transform:rotate(-70deg);
}
六角星形
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#star_six{
width:0;
height:0;
display:block;
position:absolute;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:10 0px solid#de34f7;
margin:10px auto;
}
#star_six_points:after{
content:"";
width:0;
height:0;
position:absolute;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:1 00px solid#de34f7;
margin:30px 0 0-50px;
}
八角形
八角形不很常用，但制作的方法可以有很多种，这里的制作方法是，先通过制作两个大小相同的梯形，然后再通过两边添加三角形制作出来的。
#octagon{
width:10 0px;
height:10 0px;
background:#ac60ec;
position:relative;
}
#octagon:before{
content:"";
width:42px;
height:0;
position:absolute;
top:0;
left:0;
border-bottom:29px solid#ac60ec;
border-left:29px solid#f4f4f4;
border-right:29px solid#f4f4f4;
}
#octagon:after{
content:"";
width:42px;
height:0;
position:absolute;
bottom:0;
left:0;
border-top:29px solid#ac60ec;
border-left:29px solid#f4f4f4;
border-right:29px solid#f4f4f4;
}
心形
心形跟星形都是比较复杂的图片，严格意义上来说，都是拼接图片，并不是一个div能够实现的图片，这里就体现了伪元素before和after的灵活性，再通过修改transform-origin属性来元素的旋转中心点。最终实现心形。
#heart{
position:relative;
}
#heart:before,#heart:after{
content:"";
width:70px;
height:115px;
position:absolute;
background:red;
left:70px;
top:0;
border-radius:50px 50px 0 0;
transform:rotate(-45deg);
transform-origin:0 10 0%;
}
#heart:after{
left:0;
transform:rotate(45deg);
transform-origin:1 00%10 0%;
}
无穷符号
无穷符号和前面制作方法类似，也是设置border属性和添加伪类元素的角度来制作的：
#infinity{
width:220px;
height:10 0px;
position:relative;
}
#infinity:before,#infinity:after{
content:"";
width:60px;
height:60px;
position:absolute;
top:0;
left:0;
border:20px solid#06c999;
-moz-border-radius:50px 50px 0;
border-radius:50px 50px 0 50px;
transform:rotate(-45deg);
}
#infinity:after{
left:auto;
right:0;
border-radius:50px 50px 50px 0;
transform:rotate(45deg);
}
消息提示框
消息提示框是通过先制作一个矩形，然后再其他位置利用伪类元素添加一个小三角形，做装饰，制作出来的：
#comment_bubble{
width:140px;
height:10 0px;
background:#088cb7;
position:relative;
border-radius:12px;
}
#comment_bubble:before{
content:"";
width:0;
height:0;
right:10 0%;
top:38px;
position:absolute;
border-top:13px solid transparent;
border-right:26px solid#088cb7;
border-bottom:13px solid transparent;
}
吃豆人
吃豆人看上去是一个不规则的图形，其实它的制作方法很简单，可以通过转化，先在一个圆形里面制作一个透明的三角形，就可以完成了，非常简单。
#pacman{
width:0;
height:0;
border-right:70px solid transparent;
border-top:70px solid#ffde00;
border-left:70px solid#ffde00;
border-bottom:70px solid#ffde00;
border-radius:70px;
}
小结
利用CSS3绘制图形，你只需要掌握一些新增的CSS属性，比如transform、border-radius等，一些绘制起来比较麻烦的图形也可以轻松实现。
更值得大家注意的是，CSS能够对网页中元素位置的排版进行像素级精确控制，用css制作的图片不仅加载速度更快，还可以通过代码控制图形的大小以及颜色，方便后期修改。下面就教大家用css来制作一些简单又实用的图形。
圆形
圆形是比较常见的一个图形，那么如何利用CSS进行绘制呢？我们先写一个div盒模块，再设置一个ID。
<div id="circle"></div>
圆形很简单，让div盒模块宽高相等，然后设置border-radius属性为50%即可：
#circle{
width:150px;
height:150px;
background:#e4393c;
border-radius:50%;
}
正方形
正文形是最简单的了，只要设置宽高相等就可以了。
<div id="square"></div>
#square{
width:120px;
height:120px;
background:#99ffc0;
}
长方形
与正方形一样，CSS制作长方形也很简单，保证div模块的宽高不相等就行了：
<div id="rectangle"></div>
#rectangle{
width:220px;
height:120px;
background:#734490;
}
椭圆形
椭圆其实就是长方形的变身，只要在长方形的代码中把它变成加一个border-radius属性就可以了：
<div id="oval"></div>
#oval{
width:300px;
height:150px;
background:#e4393c;
border-radius:150px/75px;
}
三角形
三角形的制作，主要涉及到的知识点是border属性，只需要通过修改设置不同border的透明效果，就能实现出三角形状。此外，在制作三角形的过程中，宽度和高度都需要设置为0。
<div id="triangle"></div>
#triangle{
width:0;
height:0;
border-bottom:120px solid#e4393c;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
倒三角形
原理相同，只不过设置的是border-top、border-left和border-right三条边的属性，反向设置，就是倒过来的三角形了，就不做多余的解释：
#triangle{
width:0;
height:0;
border-top:120px solid#CCFF66;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
菱形
菱形看上去比较难，其实也很简单，只是把2个三角形接合在一起，就形成了菱形，这里要使用的是一个新的属性，叫transform，意为旋转，后面还有很多图形需要用到这个属性。
#diamond{
width:120px;
height:120px;
background:#CCFF66;
transform:rotate(-45deg);
transform-origin:0 10 0%;
margin:60px 0 10px 310px;
}
梯形
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#trapezium{
height:0;
width:120px;
border-bottom:120px solid#CCFF66;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
平行四边形
平行四边形也很简单，只是一个长方形，变倾斜了而已，先写一个长方形，再给它一个transform属性：
#parallelogram{
width:160px;
height:1 00px;
background:#CCFF66;
transform:skew(30deg);
}
星形
五角星是很复杂的图形，基本是css制作图形中最复杂的一个了。主要是通过使用transform属性和添加伪类的方式来实现的。
#star{
display:block;
width:0;
height:0;
margin:50px 0;
color:#fc2e5a;
position:relative;
border-right:10 0px solid transparent;
border-bottom:70px solid#fc2e5a;
border-left:10 0px solid transparent;
transform:rotate(35deg);
}
#star:before{
height:0;
width:0;
position:absolute;
display:block;
top:-45px;
left:-65px;
border-bottom:80px solid#fc2e5a;
border-left:30px solid transparent;
border-right:30px solid transparent;
content:'';
transform:rotate(-35deg);
}
#star:after{
content:'';
width:0;
height:0;
position:absolute;
display:block;
top:3px;
left:-105px;
color:#fc2e5a;
border-right:10 0px solid transparent;
border-bottom:70px solid#fc2e5a;
border-left:10 0px solid transparent;
transform:rotate(-70deg);
}
六角星形
#star_six{
width:0;
height:0;
display:block;
position:absolute;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:10 0px solid#de34f7;
margin:10px auto;
}
#star_six_points:after{
content:"";
width:0;
height:0;
position:absolute;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:1 00px solid#de34f7;
margin:30px 0 0-50px;
}
八角形
#octagon{
width:10 0px;
height:10 0px;
background:#ac60ec;
position:relative;
}
#octagon:before{
content:"";
width:42px;
height:0;
position:absolute;
top:0;
left:0;
border-bottom:29px solid#ac60ec;
border-left:29px solid#f4f4f4;
border-right:29px solid#f4f4f4;
}
#octagon:after{
content:"";
width:42px;
height:0;
position:absolute;
bottom:0;
left:0;
border-top:29px solid#ac60ec;
border-left:29px solid#f4f4f4;
border-right:29px solid#f4f4f4;
}
心形
#heart{
position:relative;
}
#heart:before,#heart:after{
content:"";
width:70px;
height:115px;
position:absolute;
background:red;
left:70px;
top:0;
border-radius:50px 50px 0 0;
transform:rotate(-45deg);
transform-origin:0 10 0%;
}
#heart:after{
left:0;
transform:rotate(45deg);
transform-origin:1 00%10 0%;
}
无穷符号
#infinity{
width:220px;
height:10 0px;
position:relative;
}
#infinity:before,#infinity:after{
content:"";
width:60px;
height:60px;
position:absolute;
top:0;
left:0;
border:20px solid#06c999;
-moz-border-radius:50px 50px 0;
border-radius:50px 50px 0 50px;
transform:rotate(-45deg);
}
#infinity:after{
left:auto;
right:0;
border-radius:50px 50px 50px 0;
transform:rotate(45deg);
}
消息提示框
消息提示框是通过先制作一个矩形，然后再其他位置利用伪类元素添加一个小三角形，做装饰，制作出来的：
#comment_bubble{
width:140px;
height:10 0px;
background:#088cb7;
position:relative;
border-radius:12px;
}
#comment_bubble:before{
content:"";
width:0;
height:0;
right:10 0%;
top:38px;
position:absolute;
border-top:13px solid transparent;
border-right:26px solid#088cb7;
border-bottom:13px solid transparent;
}
吃豆人
吃豆人看上去是一个不规则的图形，其实它的制作方法很简单，可以通过转化，先在一个圆形里面制作一个透明的三角形，就可以完成了，非常简单。
#pacman{
width:0;
height:0;
border-right:70px solid transparent;
border-top:70px solid#ffde00;
border-left:70px solid#ffde00;
border-bottom:70px solid#ffde00;
border-radius:70px;
}
小结
CSS3为我们提供了制作各种复杂几何图形的能力，我们可以在页面中制作各种图形。
关注我们，收获更多品牌设计、网站开发、定制软件开发、小程序开发、SEO推广知识
上一篇：暂无上一篇
下一篇：【干货】黑盒测试方法
