css能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。
推荐教程：css视频教程
我们还可以使用 css 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 html 元素在 css 中创建许多形状。
虽然我们现在大都使用字体图标或者svg图片，似乎使用 css 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。1.正方形
#square {  width: 100px;  height: 100px;  background: red;}
2.长方形
#rectangle {  width: 200px;  height: 100px;  background: red;}
3.圆形
#circle {  width: 100px;  height: 100px;  background: red;  border-radius: 50%}
4.椭圆形
#oval {  width: 200px;  height: 100px;  background: red;  border-radius: 100px / 50px;}
5.上三角
#triangle-up {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid red;}
6.下三角
#triangle-down {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-top: 100px solid red;}
7.左三角
#triangle-left {  width: 0;  height: 0;  border-top: 50px solid transparent;  border-right: 100px solid red;  border-bottom: 50px solid transparent;}
8.右三角
#triangle-right {  width: 0;  height: 0;  border-top: 50px solid transparent;  border-left: 100px solid red;  border-bottom: 50px solid transparent;}
9.左上角
 #triangle-topleft {  width: 0;  height: 0;  border-top: 100px solid red;  border-right: 100px solid transparent;}
10.右上角
#triangle-topright {  width: 0;  height: 0;  border-top: 100px solid red;  border-left: 100px solid transparent;}
11.左下角
#triangle-bottomleft {  width: 0;  height: 0;  border-bottom: 100px solid red;  border-right: 100px solid transparent;}
12.右下角
#triangle-bottomright {  width: 0;  height: 0;  border-bottom: 100px solid red;  border-left: 100px solid transparent;}
13.箭头
#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);}
14.梯形
#trapezoid {  border-bottom: 100px solid red;  border-left: 25px solid transparent;  border-right: 25px solid transparent;  height: 0;  width: 100px;}
15.平行四边形
#parallelogram {  width: 150px;  height: 100px;  transform: skew(20deg);  background: red;}
16.星星 (6角)
#star-six {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid red;  position: relative;}#star-six:after {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-top: 100px solid red;  position: absolute;  content: ;  top: 30px;  left: -50px;}
17.星星 (5角)
#star-five {  margin: 50px 0;  position: relative;  display: block;  color: red;  width: 0px;  height: 0px;  border-right: 100px solid transparent;  border-bottom: 70px solid red;  border-left: 100px solid transparent;  transform: rotate(35deg);}#star-five:before {  border-bottom: 80px solid red;  border-left: 30px solid transparent;  border-right: 30px solid transparent;  position: absolute;  height: 0;  width: 0;  top: -45px;  left: -65px;  display: block;  content: '';  transform: rotate(-35deg);}#star-five:after {  position: absolute;  display: block;  color: red;  top: 3px;  left: -105px;  width: 0px;  height: 0px;  border-right: 100px solid transparent;  border-bottom: 70px solid red;  border-left: 100px solid transparent;  transform: rotate(-70deg);  content: '';}
18.五边形
#pentagon {  position: relative;  width: 54px;  box-sizing: content-box;  border-width: 50px 18px 0;  border-style: solid;  border-color: red transparent;}#pentagon:before {  content: ;  position: absolute;  height: 0;  width: 0;  top: -85px;  left: -18px;  border-width: 0 45px 35px;  border-style: solid;  border-color: transparent transparent red;}
19.六边形
#hexagon {  width: 100px;  height: 55px;  background: red;  position: relative;}#hexagon:before {  content: ;  position: absolute;  top: -25px;  left: 0;  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 25px solid red;}#hexagon:after {  content: ;  position: absolute;  bottom: -25px;  left: 0;  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-top: 25px solid red;}
20.八边形
#octagon {  width: 100px;  height: 100px;  background: red;  position: relative;}#octagon:before {  content: ;  width: 100px;  height: 0;  position: absolute;  top: 0;  left: 0;  border-bottom: 29px solid red;  border-left: 29px solid #eee;  border-right: 29px solid #eee;}#octagon:after {  content: ;  width: 100px;  height: 0;  position: absolute;  bottom: 0;  left: 0;  border-top: 29px solid red;  border-left: 29px solid #eee;  border-right: 29px solid #eee;}
21.爱心
#heart {  position: relative;  width: 100px;  height: 90px;}#heart:before,#heart:after {  position: absolute;  content: ;  left: 50px;  top: 0;  width: 50px;  height: 80px;  background: red;  border-radius: 50px 50px 0 0;  transform: rotate(-45deg);  transform-origin: 0 100%;}#heart:after {  left: 0;  transform: rotate(45deg);  transform-origin: 100% 100%;}
22.无穷大
#infinity {  position: relative;  width: 212px;  height: 100px;  box-sizing: content-box;}#infinity:before,#infinity:after {  content: ;  box-sizing: content-box;  position: absolute;  top: 0;  left: 0;  width: 60px;  height: 60px;  border: 20px solid red;  border-radius: 50px 50px 0 50px;  transform: rotate(-45deg);}#infinity:after {  left: auto;  right: 0;  border-radius: 50px 50px 50px 0;  transform: rotate(45deg);}
23.菱形
#diamond {  width: 0;  height: 0;  border: 50px solid transparent;  border-bottom-color: red;  position: relative;  top: -50px;}#diamond:after {  content: '';  position: absolute;  left: -50px;  top: 50px;  width: 0;  height: 0;  border: 50px solid transparent;  border-top-color: red;}
24.钻石
#diamond-shield {  width: 0;  height: 0;  border: 50px solid transparent;  border-bottom: 20px solid red;  position: relative;  top: -50px;}#diamond-shield:after {  content: '';  position: absolute;  left: -50px;  top: 20px;  width: 0;  height: 0;  border: 50px solid transparent;  border-top: 70px solid red;}
25.钻戒
#diamond-narrow {  width: 0;  height: 0;  border: 50px solid transparent;  border-bottom: 70px solid red;  position: relative;  top: -50px;}#diamond-narrow:after {  content: '';  position: absolute;  left: -50px;  top: 70px;  width: 0;  height: 0;  border: 50px solid transparent;  border-top: 70px solid red;}
26.钻石2
#cut-diamond {  border-style: solid;  border-color: transparent transparent red transparent;  border-width: 0 25px 25px 25px;  height: 0;  width: 50px;  box-sizing: content-box;  position: relative;  margin: 20px 0 50px 0;}#cut-diamond:after {  content: ;  position: absolute;  top: 25px;  left: -25px;  width: 0;  height: 0;  border-style: solid;  border-color: red transparent transparent transparent;  border-width: 70px 50px 0 50px;}
27.蛋蛋
#egg {  display: block;  width: 126px;  height: 180px;  background-color: red;  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
28.吃豆人
#pacman {  width: 0px;  height: 0px;  border-right: 60px solid transparent;  border-top: 60px solid red;  border-left: 60px solid red;  border-bottom: 60px solid red;  border-top-left-radius: 60px;  border-top-right-radius: 60px;  border-bottom-left-radius: 60px;  border-bottom-right-radius: 60px;}
29.对话泡泡
#talkbubble {  width: 120px;  height: 80px;  background: red;  position: relative;  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;}#talkbubble:before {  content: ;  position: absolute;  right: 100%;  top: 26px;  width: 0;  height: 0;  border-top: 13px solid transparent;  border-right: 26px solid red;  border-bottom: 13px solid transparent;}
30. 12点 爆发
#burst-12 {  background: red;  width: 80px;  height: 80px;  position: relative;  text-align: center;}#burst-12:before,#burst-12:after {  content: ;  position: absolute;  top: 0;  left: 0;  height: 80px;  width: 80px;  background: red;}#burst-12:before {  transform: rotate(30deg);}#burst-12:after {  transform: rotate(60deg);}
31. 8点 爆发
#burst-8 {  background: red;  width: 80px;  height: 80px;  position: relative;  text-align: center;  transform: rotate(20deg);}#burst-8:before {  content: ;  position: absolute;  top: 0;  left: 0;  height: 80px;  width: 80px;  background: red;  transform: rotate(135deg);}
32.太极
#yin-yang {  width: 96px;  box-sizing: content-box;  height: 48px;  background: #eee;  border-color: red;  border-style: solid;  border-width: 2px 2px 50px 2px;  border-radius: 100%;  position: relative;}#yin-yang:before {  content: ;  position: absolute;  top: 50%;  left: 0;  background: #eee;  border: 18px solid red;  border-radius: 100%;  width: 12px;  height: 12px;  box-sizing: content-box;}#yin-yang:after {  content: ;  position: absolute;  top: 50%;  left: 50%;  background: red;  border: 18px solid #eee;  border-radius: 100%;  width: 12px;  height: 12px;  box-sizing: content-box;}
33.徽章丝带
#badge-ribbon {  position: relative;  background: red;  height: 100px;  width: 100px;  border-radius: 50px;}#badge-ribbon:before,#badge-ribbon:after {  content: '';  position: absolute;  border-bottom: 70px solid red;  border-left: 40px solid transparent;  border-right: 40px solid transparent;  top: 70px;  left: -10px;  transform: rotate(-140deg);}#badge-ribbon:after {  left: auto;  right: -10px;  transform: rotate(140deg);}
34.太空入侵者（电脑游戏名）
#space-invader {  box-shadow: 0 0 0 1em red,  0 1em 0 1em red,  -2.5em 1.5em 0 .5em red,  2.5em 1.5em 0 .5em red,  -3em -3em 0 0 red,  3em -3em 0 0 red,  -2em -2em 0 0 red,  2em -2em 0 0 red,  -3em -1em 0 0 red,  -2em -1em 0 0 red,  2em -1em 0 0 red,  3em -1em 0 0 red,  -4em 0 0 0 red,  -3em 0 0 0 red,  3em 0 0 0 red,  4em 0 0 0 red,  -5em 1em 0 0 red,  -4em 1em 0 0 red,  4em 1em 0 0 red,  5em 1em 0 0 red,  -5em 2em 0 0 red,  5em 2em 0 0 red,  -5em 3em 0 0 red,  -3em 3em 0 0 red,  3em 3em 0 0 red,  5em 3em 0 0 red,  -2em 4em 0 0 red,  -1em 4em 0 0 red,  1em 4em 0 0 red,  2em 4em 0 0 red;  background: red;  width: 1em;  height: 1em;  overflow: hidden;  margin: 50px 0 70px 65px;}
35.电视
#tv {  position: relative;  width: 200px;  height: 150px;  margin: 20px 0;  background: red;  border-radius: 50% / 10%;  color: white;  text-align: center;  text-indent: .1em;}#tv:before {  content: '';  position: absolute;  top: 10%;  bottom: 10%;  right: -5%;  left: -5%;  background: inherit;  border-radius: 5% / 50%;}
36.雪佛龙
#chevron {  position: relative;  text-align: center;  padding: 12px;  margin-bottom: 6px;  height: 60px;  width: 200px;}#chevron:before {  content: '';  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 51%;  background: red;  transform: skew(0deg, 6deg);}#chevron:after {  content: '';  position: absolute;  top: 0;  right: 0;  height: 100%;  width: 50%;  background: red;  transform: skew(0deg, -6deg);}
37.放大镜
#magnifying-glass {  font-size: 10em;  display: inline-block;  width: 0.4em;  box-sizing: content-box;  height: 0.4em;  border: 0.1em solid red;  position: relative;  border-radius: 0.35em;}#magnifying-glass:before {  content: ;  display: inline-block;  position: absolute;  right: -0.25em;  bottom: -0.1em;  border-width: 0;  background: red;  width: 0.35em;  height: 0.08em;  transform: rotate(45deg);}
38.facebook图标
#facebook-icon {  background: red;  text-indent: -999em;  width: 100px;  height: 110px;  box-sizing: content-box;  border-radius: 5px;  position: relative;  overflow: hidden;  border: 15px solid red;  border-bottom: 0;}#facebook-icon:before {  content: /20;  position: absolute;  background: red;  width: 40px;  height: 90px;  bottom: -30px;  right: -37px;  border: 20px solid #eee;  border-radius: 25px;  box-sizing: content-box;}#facebook-icon:after {  content: /20;  position: absolute;  width: 55px;  top: 50px;  height: 20px;  background: #eee;  right: 5px;  box-sizing: content-box;}
39.月亮
#moon {  width: 80px;  height: 80px;  border-radius: 50%;  box-shadow: 15px 15px 0 0 red;}
40.旗
#flag {  width: 110px;  height: 56px;  box-sizing: content-box;  padding-top: 15px;  position: relative;  background: red;  color: white;  font-size: 11px;  letter-spacing: 0.2em;  text-align: center;  text-transform: uppercase;}#flag:after {  content: ;  position: absolute;  left: 0;  bottom: 0;  width: 0;  height: 0;  border-bottom: 13px solid #eee;  border-left: 55px solid transparent;  border-right: 55px solid transparent;}
41.圆锥
 #cone {  width: 0;  height: 0;  border-left: 70px solid transparent;  border-right: 70px solid transparent;  border-top: 100px solid red;  border-radius: 50%;}
42.十字架
#cross {  background: red;  height: 100px;  position: relative;  width: 20px;}#cross:after {  background: red;  content: ;  height: 20px;  left: -40px;  position: absolute;  top: 40px;  width: 100px;}
43.根基
 #base {  background: red;  display: inline-block;  height: 55px;  margin-left: 20px;  margin-top: 55px;  position: relative;  width: 100px;}#base:before {  border-bottom: 35px solid red;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  content: ;  height: 0;  left: 0;  position: absolute;  top: -35px;  width: 0;}
44.指示器
#pointer {  width: 200px;  height: 40px;  position: relative;  background: red;}#pointer:after {  content: ;  position: absolute;  left: 0;  bottom: 0;  width: 0;  height: 0;  border-left: 20px solid white;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;}#pointer:before {  content: ;  position: absolute;  right: -20px;  bottom: 0;  width: 0;  height: 0;  border-left: 20px solid red;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;}
45.锁
#lock {  font-size: 8px;  position: relative;  width: 18em;  height: 13em;  border-radius: 2em;  top: 10em;  box-sizing: border-box;  border: 3.5em solid red;  border-right-width: 7.5em;  border-left-width: 7.5em;  margin: 0 0 6rem 0;}#lock:before {  content: ;  box-sizing: border-box;  position: absolute;  border: 2.5em solid red;  width: 14em;  height: 12em;  left: 50%;  margin-left: -7em;  top: -12em;  border-top-left-radius: 7em;  border-top-right-radius: 7em;}#lock:after {  content: ;  box-sizing: border-box;  position: absolute;  border: 1em solid red;  width: 5em;  height: 8em;  border-radius: 2.5em;  left: 50%;  top: -1em;  margin-left: -2.5em;}
英文原文地址：https://css-tricks.com/the-shapes-of-css/
更多编程相关知识，请访问：编程入门！！
以上就是45个使用css生成的形状（值得收藏）的详细内容。