当前位置：Gxlcms > css > css实现各种基本图形

css实现各种基本图形

时间：2021-07-01 10:21:17 帮助过：43人阅读

三角形

写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形：

  1. .triangle {
  2.     border-style: solid;
  3.     border-width: 20px;
  4.     border-color: #000 transparent transparent;
  5.     width: 0px;
  6.     height: 0px;
  7. }

效果图：

css 实现各种基本图形

百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：

  1. .triangle {
  2.     border-style: solid;
  3.     border-width: 20px;
  4.     border-color: #000 blue transparent transparent;
  5.     width: 50px;
  6.     height: 50px;
  7. }

效果图：

css 实现各种基本图形

恍然大悟，原来边框其实是等腰梯形！

那么还可以做其他哪些图形（以下代码摘自 the shapes of css）？

圆形

css 实现各种基本图形

  1. #circle {
  2.     width: 200px;
  3.     height: 200px;
  4.     background: red;
  5.     -moz-border-radius: 50%;
  6.     -webkit-border-radius: 50%;
  7.     border-radius: 50%;
  8. }

主要利用了 border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

css 实现各种基本图形

  1. #parallelogram {
  2.     width: 150px;
  3.     height: 100px;
  4.     -webkit-transform: skew(160deg);
  5.        -moz-transform: skew(160deg);
  6.          -o-transform: skew(160deg);
  7.     background: red;
  8. }

利用 transform 倾斜特性如下：

  • 向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）

  • 向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

css 实现各种基本图形

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：

  1.   width: 10px;
  2.   height:10px;
  3.   border-right:  100px solid green;
  4.   border-bottom: 70px  solid red;
  5.   border-top: 20px  solid blue;
  6.   border-left:   50px solid black;

css 实现各种基本图形

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border 的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下（很惊讶原作者是如何算出来这些边框宽度的）：

  1. #star-five {
  2.    margin: 50px 0;
  3.    position: relative;
  4.    display: block;
  5.    color: red;
  6.    width: 0px;
  7.    height: 0px;
  8.    border-right:  100px solid transparent;
  9.    border-bottom: 70px  solid red;
  10.    border-left:   100px solid transparent;
  11.    -moz-transform:    rotate(35deg);
  12.    -webkit-transform: rotate(35deg);
  13.    -ms-transform:     rotate(35deg);
  14.    -o-transform:      rotate(35deg);
  15. }
  16. #star-five:before {
  17.    border-bottom: 80px solid red;
  18.    border-left: 30px solid transparent;
  19.    border-right: 30px solid transparent;
  20.    position: absolute;
  21.    height: 0;
  22.    width: 0;
  23.    top: -45px;
  24.    left: -65px;
  25.    display: block;
  26.    content: '';
  27.    -webkit-transform: rotate(-35deg);
  28.    -moz-transform:    rotate(-35deg);
  29.    -ms-transform:     rotate(-35deg);
  30.    -o-transform:      rotate(-35deg);
  31. }
  32. #star-five:after {
  33.    position: absolute;
  34.    display: block;
  35.    color: red;
  36.    top: 3px;
  37.    left: -105px;
  38.    width: 0px;
  39.    height: 0px;
  40.    border-right: 100px solid transparent;
  41.    border-bottom: 70px solid red;
  42.    border-left: 100px solid transparent;
  43.    -webkit-transform: rotate(-70deg);
  44.    -moz-transform:    rotate(-70deg);
  45.    -ms-transform:     rotate(-70deg);
  46.    -o-transform:      rotate(-70deg);
  47.    content: '';
  48. }

其他有趣的图形

钻石

css 实现各种基本图形

通过一个梯形和一个三角形组合而成

吃豆人

css 实现各种基本图形

一个圆形，隐藏右侧边

对话框

css 实现各种基本图形

一个三角形，加一个圆角矩形

三角形

写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形：

  1. .triangle {
  2.     border-style: solid;
  3.     border-width: 20px;
  4.     border-color: #000 transparent transparent;
  5.     width: 0px;
  6.     height: 0px;
  7. }

效果图：

css 实现各种基本图形

百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：

  1. .triangle {
  2.     border-style: solid;
  3.     border-width: 20px;
  4.     border-color: #000 blue transparent transparent;
  5.     width: 50px;
  6.     height: 50px;
  7. }

效果图：

css 实现各种基本图形

恍然大悟，原来边框其实是等腰梯形！

那么还可以做其他哪些图形（以下代码摘自 the shapes of css）？

圆形

css 实现各种基本图形

  1. #circle {
  2.     width: 200px;
  3.     height: 200px;
  4.     background: red;
  5.     -moz-border-radius: 50%;
  6.     -webkit-border-radius: 50%;
  7.     border-radius: 50%;
  8. }

主要利用了 border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

css 实现各种基本图形

  1. #parallelogram {
  2.     width: 150px;
  3.     height: 100px;
  4.     -webkit-transform: skew(160deg);
  5.        -moz-transform: skew(160deg);
  6.          -o-transform: skew(160deg);
  7.     background: red;
  8. }

利用 transform 倾斜特性如下：

  • 向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）

  • 向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

css 实现各种基本图形

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：

  1.   width: 10px;
  2.   height:10px;
  3.   border-right:  100px solid green;
  4.   border-bottom: 70px  solid red;
  5.   border-top: 20px  solid blue;
  6.   border-left:   50px solid black;

css 实现各种基本图形

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border 的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下（很惊讶原作者是如何算出来这些边框宽度的）：

  1. #star-five {
  2.    margin: 50px 0;
  3.    position: relative;
  4.    display: block;
  5.    color: red;
  6.    width: 0px;
  7.    height: 0px;
  8.    border-right:  100px solid transparent;
  9.    border-bottom: 70px  solid red;
  10.    border-left:   100px solid transparent;
  11.    -moz-transform:    rotate(35deg);
  12.    -webkit-transform: rotate(35deg);
  13.    -ms-transform:     rotate(35deg);
  14.    -o-transform:      rotate(35deg);
  15. }
  16. #star-five:before {
  17.    border-bottom: 80px solid red;
  18.    border-left: 30px solid transparent;
  19.    border-right: 30px solid transparent;
  20.    position: absolute;
  21.    height: 0;
  22.    width: 0;
  23.    top: -45px;
  24.    left: -65px;
  25.    display: block;
  26.    content: '';
  27.    -webkit-transform: rotate(-35deg);
  28.    -moz-transform:    rotate(-35deg);
  29.    -ms-transform:     rotate(-35deg);
  30.    -o-transform:      rotate(-35deg);
  31. }
  32. #star-five:after {
  33.    position: absolute;
  34.    display: block;
  35.    color: red;
  36.    top: 3px;
  37.    left: -105px;
  38.    width: 0px;
  39.    height: 0px;
  40.    border-right: 100px solid transparent;
  41.    border-bottom: 70px solid red;
  42.    border-left: 100px solid transparent;
  43.    -webkit-transform: rotate(-70deg);
  44.    -moz-transform:    rotate(-70deg);
  45.    -ms-transform:     rotate(-70deg);
  46.    -o-transform:      rotate(-70deg);
  47.    content: '';
  48. }

其他有趣的图形

钻石

css 实现各种基本图形

通过一个梯形和一个三角形组合而成

吃豆人

css 实现各种基本图形

一个圆形，隐藏右侧边

对话框

css 实现各种基本图形

一个三角形，加一个圆角矩形

更多css 实现各种基本图形相关文章请关注PHP中文网！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！