Comment effectuer une transformation polygonale régulière d'un seul div avec CSS

Cet article utilise purement CSS pour transformer un "simple" div d'un triangle régulier en un octogone régulier (un seul div ne peut être qu'un octogone régulier au maximum), et utilise enfin l'effet d'animation pour le transformer en un octogone régulier. polygone. Animation, et comme les polygones réguliers nécessitent de nombreux calculs de fonctions trigonométriques, pour des raisons de commodité, les côtés des polygones réguliers sont définis sur 100 px.

Triangle ixagonal

Un triangle équilatéral n'a pas besoin d'utiliser des pseudo-éléments. Il peut être généré en définissant simplement la largeur de la bordure de p lui-même. longueur du côté et ligne centrale du triangle équilatéral, si la longueur du côté est de 100 px, la ligne centrale est arrondie à 87 px (100 x sin (60) = 87).

Nous devons donc définir la longueur et la largeur de p sur 0, puis définir la largeur de la bordure inférieure sur 87px, et les bordures gauche et droite. Définissez la largeur sur 50 px (et la couleur sur transparente) pour créer un beau triangle.

width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;

Carré

Carré devrait être le plus simple, il suffit de définir la longueur et la largeur sur la même valeur Mais il y en a en fait. deux autres méthodes : la première consiste à définir la longueur et la largeur sur 0, et les bordures supérieure, inférieure, gauche et droite à 50 px. La seconde consiste à définir la hauteur sur 0 et la largeur sur 100 px, puis a. certain La largeur du côté est également définie sur 100, ce qui est très bien.

.a{
width:100px;
height:100px;
background:#c00;
}
.b{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:#095;
}
.c{
width:100px;
height:0;
border-width:0 0 100px;
border-style:solid;
border-color:#069;
}

Pentagone régulier

Le pentagone régulier doit entrer dans le domaine des fonctions trigonométriques de base. Décomposons d'abord le pentagone régulier, utilisez le p original comme triangle supérieur, puis utilisez un pseudo-élément pour créer le trapèze inférieur. Étant donné que l'angle entre chaque côté du pentagone régulier est de 108 degrés, vous pouvez calculer le triangle supérieur à l'aide de fonctions trigonométriques. 100 x cos(54)), la largeur est de 192 px (100x sin(54) x 2), la hauteur du trapèze inférieur est de 95 px (100 x sin(72)) et la largeur du côté long est la même que le triangle ci-dessus fait 192px.

Après avoir compris le principe, vous pouvez utiliser des pseudo-éléments pour faire correspondre et créer !

.a{
      position:relative;
  width:0;
  height:0;
  border-width:0 81px 59px;
      border-style:solid;
  border-color:transparent transparent #069;
}
.a:before{
  position:absolute;
  content:"";
  top:59px;
  left:-81px;
  width:100px;
  height:0;
  background:none;
  border-width:95px 31px 0;
  border-style:solid;    
  border-color:#069 transparent transparent;
    }

Hexagone régulier

Chaque angle d'un hexagone régulier mesure 120 degrés, s'il est vu dans la direction CSS pure. Si c'est le cas, il suffit changez le triangle du pentagone régulier pour créer un hexagone régulier, qui est juste une combinaison des trapèzes supérieur et inférieur. Le côté long du trapèze est de 200 pixels (100 x cos (60) x 2 + 100), la hauteur du. le trapèze mesure 87px (100 x sin(60)).

Vous pouvez donc réaliser un hexagone régulier en modifiant légèrement le CSS du pentagone régulier.

.a{
      position:relative;
    width:100px;
    height:0;
    border-width:0 50px 87px;
      border-style:solid;
    border-color:transparent transparent #f80;
}
.a:before{
  position:absolute;
  content:"";
    top:87px;
    left:-50px;
    width:100px;
    height:0;
  background:none;
    border-width:87px 50px 0;
  border-style:solid;    
    border-color:#f80 transparent transparent;
    }

Heptagone régulier

Le pseudo-élément après doit être utilisé au début de l'heptagone régulier, car l'heptagone régulier doit Il doit être démonté en trois blocs de mémoire, en utilisant le p original comme triangle supérieur, un pseudo élément comme trapèze central, puis un autre pseudo élément comme trapèze inférieur. Les angles des heptagones réguliers ne sont pas des nombres entiers. 128 et 4/7 degrés, et la deuxième décimale est d'environ 128,57, le résultat calculé est donc celui indiqué dans la figure ci-dessous. Le point clé est que vous devez clairement connaître la longueur et la largeur.

Après avoir la longueur et la largeur, commencez à l'écrire avec CSS !

.a{
      position:relative;
    width:0;
    height:0;
    border-width:0 90px 43px;
      border-style:solid;
    border-color:transparent transparent #09c;
}
.a:before{
  position:absolute;
  content:"";
    top:140px;
    left:-112px;
    width:100px;
    height:0;
    border-width:78px 62px 0;
  border-style:solid;    
    border-color:#09c transparent transparent;
    }
  .a:after{
    position:absolute;
    content:"";
    top:43px;
    left:-112px;
    width:180px;
    height:0;
    border-width:0 22px 97px;
    background:none;
    border-style:solid;
    border-color:transparent transparent #09c;
  }

Octogone régulier

L'octogone régulier consiste en fait à transformer le triangle de l'heptagone régulier en un trapèze. le trapèze au milieu devient un rectangle. L'angle entre l'octogone régulier est de 135 degrés. La longueur et la largeur calculées de chaque zone sont les suivantes.

Avec la même compréhension des principes, CSS est beaucoup plus simple à faire !

.a{
      position:relative;
    width:100px;
      height:0;
      border-width:0 71px 71px;
      border-style:solid;
    border-color:transparent transparent  #f69;
}
.a:before{
  position:absolute;
  content:"";
    top:171px;
      left:-71px;
      width:100px;
      height:0;
      border-width:71px 71px 0;
  border-style:solid;    
      border-color: #f69 transparent transparent;
    }
  .a:after{
      position:absolute;
      content:"";
      top:71px;
      left:-71px;
      width:242px;
      height:0;
      border-width:0 0 100px;
      background:none;
      border-style:solid;
      border-color:transparent transparent #f69;
  }

小结

以上就是纯粹利用CSS做出来的单一div的正多边形变换，如果熟练的话，其实加上动画效果，就可以做出像下面示例这个样子的变换动画啰！

相关教程：css视频教程

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!