专栏名称: SegmentFault思否

SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。

45个值得收藏的 CSS 形状

SegmentFault思否 · 公众号 · 程序员 · 2019-04-22 13:38

正文

本文原载于SegmentFault专栏“终身学习者”

翻译：前端小智

整理编辑：SegmentFault

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 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