css implémente divers graphiques de base

Triangle

Lorsque j'écris du CSS, je suis habitué à utiliser des images d'arrière-plan et j'ignore que le CSS lui-même peut en fait implémenter de nombreuses formes de base simples, telles que des triangles :

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

Rendu :

Je suis confus, pourquoi un triangle s'affiche-t-il lorsque la largeur et la hauteur sont 0 ? Les bordures ordinaires semblent être quatre lignes droites, mais ce n'est pas le cas. Modifiez le code du triangle et montrez ses deux côtés à titre d'exemple :

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

Rendu :

<.>

Soudain, j'ai réalisé que la bordure est en fait un

trapèze isocèle !

Alors quelles autres formes peut-on réaliser (le code suivant est tiré des formes de CSS) ?

Cercle

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

utilise principalement l'attribut

pour arrondir le rectangle. La valeur peut être une longueur (border-radius) ou un pourcentage. Le pourcentage sera converti en longueur. Par exemple, dans cet exemple, 50% signifie px, 水平圆角半径=宽度*50%, donc écrire 垂直圆角半径=高度*50% directement est équivalent. 100px

Parallélogramme

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

Utilisation des

caractéristiques d'inclinaison comme suit : transform

• vers le x -direction de l'axe (Horizontal vers la droite) Inclinaison 160° : On peut imaginer que le côté droit du rectangle pivote de 160° dans le sens inverse des aiguilles d'une montre (lors d'une rotation de 90°, les quatre côtés coïncident et la figure disparaît ; lors d'une rotation au-delà 90°, c'est similaire à la symétrie ; lorsque lorsque la rotation dépasse 180°, c'est comme tourner en cercle)

• Inclinaison vers la direction de l'axe y (horizontalement vers le bas), ce qui peut être imaginé comme la base du rectangle tournant dans le sens des aiguilles d’une montre.

Pentagone

Il est temps d'augmenter la difficulté Voyons comment dessiner un pentagone⭐️ ? L’étoile à cinq branches peut être considérée comme composée de trois triangles isocèles.

Les trois angles d'un triangle sont respectivement de 36°, 36° et 108°. À cette époque, dessiner une étoile à cinq branches équivaut à dessiner trois triangles. La méthode évoquée au début de l'article ne permet de dessiner que des triangles isocèles à

angles fixes. Si vous étudiez attentivement, l'angle est en fait contrôlable, comme indiqué ci-dessous : 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;

En définissant différentes longueurs pour la bordure, la forme de la bordure sera être affecté. : Prenons l'exemple du triangle rouge dans l'image ci-dessus. Sa longueur de base est

 ; la forme du triangle peut être déterminée. Donc en théorie, il est faisable de réaliser des triangles de tailles différentes en contrôlant les longueurs d'un border-left border-right et de trois p. Après un peu de pratique, il est presque impossible de dessiner un pentagone régulier avec cette méthode car il est difficile d'obtenir une valeur entière. border

Le code original est le suivant (

Je suis surpris de la façon dont l'auteur original a calculé la largeur de ces bordures) :

#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: '';
}

Autres graphiques intéressants

Le diamant

est formé en combinant un trapèze et un triangle

Pac-Man

un Cercle, masquer le côté droit

Boîte de dialogue

Un triangle, ajouter un rectangle arrondi

Triangle

Lorsque j'écris du CSS, je suis habitué à utiliser des images d'arrière-plan et j'ignore que CSS lui-même peut en fait réaliser de nombreux graphiques de base simples, tels que le triangle :

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

effet Image :

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

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

效果图：

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

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

圆形

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

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

平行四边形

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

利用 transform 倾斜特性如下：

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

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

五角形

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

三角形三个角分别是 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;

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 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: '';
}

其他有趣的图形

钻石

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

吃豆人

一个圆形，隐藏右侧边

对话框

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

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