FAQ CSS : Comment dessiner des polygones (triangles ~ hexagones)

Comment dessiner des polygones en utilisant du CSS pur ? Cet article vous expliquera comment dessiner des triangles à partir de CSS pur et présentera les méthodes de dessin de quadrilatères, de pentagones et d'hexagones. Des méthodes d'implémentation supérieures peuvent également être dessinées par analogie.

Aujourd'hui, je vais étudier une question CSS qui est souvent testée lors d'entretiens, en utilisant CSS pour dessiner des polygones. Cette fois, en prenant comme exemples les triangles, les quadrilatères, les pentagones et les hexagones, vous devez comprendre certaines connaissances nécessaires avant de commencer.

1. Réserve de connaissances de base

Cette fois, nous utiliserons des connaissances CSS pures pour dessiner certaines formes. Afin de dessiner ces formes, apprenez d'abord les points de connaissances CSS de base requis - le modèle de boîte CSS. [Recommandation associée : "Tutoriel vidéo CSS"]

Comme vous pouvez le voir sur l'image ci-dessus, le modèle de boîte standard est composé de contenu, de remplissage, de bordure et de marge. un regard sur la situation spécifique.

<!--HTML部分，此部分代码若是不变，后面将复用不在赘述-->
<div id="main"></div>

/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}

Le rendu est le suivant :

2. Combat pratique

Juste pour parler et non pour s'entraîner, utilisons maintenant ces propriétés CSS de base pour dessiner des triangles, quadrilatères, pentagones communs...

2.1 Quadrilatère

Si vous ne pouvez pas dessiner un quadrilatère directement en utilisant l'attribut background-color, nous pouvons voir sur la figure ci-dessus que si vous définissez la largeur et la hauteur du contenu sur 0 et définissez la largeur et la hauteur de la bordure, alors nous pouvons obtenir un Un quadrilatère est composé de bordures. Les quadrilatères sont divisés en carrés, parallélogrammes, rectangles, etc. Utilisons ici les bordures pour réaliser les trois formes ci-dessus.

2.1.1 Carré

Implantons d’abord le carré le plus simple.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

L'effet est le suivant :

2.1.2 Rectangle

Dans la version 2.1.1, nous avons déjà implémenté le carré en utilisant la bordure, implémentons donc ensuite le rectangle, en nous basant sur ce que nous avons appris pour les mathématiques. Connaissance, il nous suffit d'ajuster la longueur et la largeur du carré pour que la longueur ≠ la largeur. Implémentons-le ensuite.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 100px solid red;
  border-right: 100px solid red;
  border-top: 200px solid red;
}

L'effet est comme le montre la figure ci-dessous :

2.1.3 Parallélogramme

PS : La mise en œuvre du parallélogramme nécessite l'utilisation de deux triangles, il est donc recommandé de sauter ici. Veuillez passer à la lecture 2.2. pour voir d'abord les triangles Implémentation, puis revenez en arrière et regardez la méthode du parallélogramme ici.

On suppose ici que vous avez fini de lire le contenu de 2.2. Ensuite, réalisez le parallélogramme.

<div id="wrapper">
	<div class="public"></div>
	<div class="public move"></div>
</div>

*{
   margin: 0;
}
#wrapper {
	  position: relative;
}
.public {
   width: 0px;
   height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
  position: absolute;
}
.move {
  transform: rotate(180deg);
  top: 200px;
  left: 200px;
}

L'effet est comme le montre l'image ci-dessous :

2.2 Triangle

Jusqu'à présent, le quadrilatère le plus simple est terminé, alors avez-vous déjà un sentiment à ce moment-là ? Continuons. Puisque les bordures peuvent réaliser des quadrilatères, les triangles ne devraient poser aucun problème. Bien sûr, il existe de nombreux types de triangles, selon leurs angles, ils peuvent être divisés en triangles aigus, triangles rectangles et triangles obtus. une fois.

2.2.1 Triangle aigu

Tout d'abord, jetons un coup d'œil à la situation occupée par la gauche, la droite, le haut et le bas de la bordure lorsque la largeur et la hauteur du contenu sont toutes deux égales à 0.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

Le rendu est le suivant :

Comme on peut le voir sur la photo, gauche, droite, haut et bas occupent tous un triangle. Ensuite, lorsque nous avons besoin d'un certain triangle, il suffit de cacher l'autre. trois triangles C'est tout. Nous pouvons utiliser la valeur de l'attribut transparent pour masquer la bordure, alors implémentons-la.

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

L'effet est tel que montré sur l'image :

2.2.2 Triangle rectangle

Maintenant, nous pouvons dessiner un triangle à angle aigu. Nous pouvons obtenir le triangle rectangle en fonction de l'image ci-dessus. Montrez simplement les deux côtés de la bordure. Essayons le code

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid red;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

L'effet est comme indiqué sur l'image :

2.2.3 Triangle obtus

L'image ci-dessus confirme la faisabilité de l'idée précédente. Alors réfléchissons à la façon d'implémenter un triangle obtus ? La pensée précédente n’est pas possible, nous devons donc changer notre façon de penser.

我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！

<div id="main1"></div>
<div id="main2"></div>

#main1 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
}
#main2 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid black;
  border-left: 150px solid transparent;
  position: absolute;
  /*这里8px是浏览器中的margin自带的间距，之前没有处理*/
  top: 8px;
  left: 58px;
}

效果图如下所示：

这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。

2.3 五边形

三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。

<div id="wrapper">
    <div class="main1 tool"></div>
    <div class="main2 tool"></div>
    <div class="main3 tool"></div>
    <div class="main4 tool"></div>
    <div class="main5 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main2 {
    transform: rotate(72deg);
}
.main3 {
    transform: rotate(144deg);
}
.main4 {
    transform: rotate(216deg);
}
.main5 {
    transform: rotate(288deg);
}
.tool{
    width: 0px;
    height: 0px;
    border-right: 58px solid transparent;
    border-left: 58px solid transparent;
    border-bottom: 160px solid red;
    position: absolute;
    top: 0;
    left: 0;
}

效果如下图所示：

实现五边形的主要难点在于border的三个边的取值，以及旋转的角度。

2.4 六边形

到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过border来实现的，那么让我们来想一下怎么画出一个六边形，有条件的可以在纸上画画，我们可以把一个五边形分成6个等边三角形，让我们通过上面所学知识来实现一下六边形吧！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
  <div class="main4 tool"></div>
  <div class="main5 tool"></div>
  <div class="main6 tool"></div>
</div>

*{
  margin: 0;
}
#wrapper {
  position: relative;
  top: 300px;
  margin-left: 300px;
}
.main2 {
  transform: rotate(60deg);
}
.main3 {
  transform: rotate(120deg);
}
.main4 {
  transform: rotate(180deg);
}
.main5 {
  transform: rotate(240deg);
}
.main6 {
  transform: rotate(300deg);
}
.tool{
  width: 0px;
  height: 0px;
  border-right: calc(60px / 1.732) solid transparent;
  border-left: calc(60px / 1.732) solid transparent;
  border-bottom: 60px solid red;
  transform-origin: top;
  position: absolute;
  top: 0;
  left: 0;
}

通过上面的方法实现五边形，这边难点主要是画出等边三角形。

上面的方法已经实现了，让我们想想其他的方法实现一下吧，这里我们将通过三个四边形实现五边形，让我们一下实验一下吧！！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main1 {
    width: calc(120px / 1.732);
    height: 120px;
    background-color: black;
}
.main2 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(120deg);
    background-color: black;
}
.main3 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(240deg);
    background-color: black;
}
.tool{
    position: absolute;
    top: 0;
    left: 0;
}

好了，目前已经讲述了三角形，四边形，五边形，六边形得到实现方式了，更高的实现方式就以此类推了。

原文地址：https://juejin.cn/post/7001772184498601991

作者：执鸢者

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!