css implements various basic graphics-CSS Tutorial-php.cn

Triangle

When writing css, I am used to using background images and ignore that css itself can actually realize many simple basic graphics, such as triangles:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

Copy after login

Rendering:

css 实现各种基本图形

I am confused by qijie, why can a triangle be displayed when the width and height are 0? Ordinary borders appear to be four straight lines, but this is not the case. Modify the triangle code and show its two sides as an example:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

Copy after login

Rendering:

css 实现各种基本图形

##Suddenly I realized that the original border was actually an

isosceles trapezoid!

So what other shapes can be made (the following code is taken from the shapes of css)?

Circle

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Copy after login

Mainly uses the

border-radius attribute to round the rectangle. The value can be length (px) or percentage. The percentage will be converted into length. For example, in this example, 50% means horizontal corner radius=width*50%, vertical corner radius=height*50%so write ## directly #100px is also equivalent. Parallelogram

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

Copy after login

Use css 实现各种基本图形 transform

The tilt characteristics are as follows:

towards x The axis direction (horizontally to the right) is tilted 160°: It can be imagined that the right side of the rectangle is rotated 160° in the counterclockwise direction (when rotated 90°, the four sides coincide and the figure disappears; when rotated beyond 90°, similar symmetry ; When the rotation exceeds 180°, it is similar to turning in a circle)

tilts toward the y-axis direction (horizontally downward), which can be imagined as the base of the rectangle rotating in the clockwise direction.
pentagon

It’s time to increase the difficulty. Let’s see how to draw a pentagon⭐️? The five-pointed star can be seen as consisting of three isosceles triangles.

The three angles of the triangle are 36°, 36°, and 108° respectively. At this time, drawing a five-pointed star is equivalent to drawing three triangles. The method mentioned at the beginning of the article can only draw isosceles triangles with css 实现各种基本图形 fixed

angles. If you study

border carefully, the angle is actually controllable, as shown below:

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

Copy after login

By setting different lengths for the border, it will affect the border Shape: The red triangle in the above picture is an example. Its base length is css 实现各种基本图形 border-left + border-right

; from the cosine theorem learned in high school: by knowing the angle of the triangle and the length of any side, you can Determine the shape of the triangle. So in theory, it is feasible to realize triangles of different sizes by controlling the length of a

p three border. After some practice, it is almost impossible to draw a regular pentagon through this method because it is difficult to get an integer value. The code of the original article is as follows (I am surprised how the original author calculated the width of these borders

#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;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-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: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-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;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Copy after login

Other interesting graphicsDiamond

It is formed by combining a trapezoid and a triangle css 实现各种基本图形

Pac-Man

A circle , hide the right side css 实现各种基本图形

Dialog box

##A triangle, add a rounded rectangle

css 实现各种基本图形

Triangle

When writing css, I am used to using background images and ignore that css itself can actually realize many simple basic graphics, such as triangles:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

Copy after login

Rendering:

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

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

Copy after login

效果图：

css 实现各种基本图形

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

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

圆形

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Copy after login

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

平行四边形

css 实现各种基本图形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

Copy after login

利用 transform 倾斜特性如下：

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

五角形

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

css 实现各种基本图形

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

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

Copy after login

css 实现各种基本图形

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

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

#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;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-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: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-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;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Copy after login