Comment créer des formes irrégulières CSS3 courantes

La conception graphique irrégulière CSS3 devient de plus en plus populaire dans la conception de pages Web modernes. Créer des conceptions irrégulières est devenu de plus en plus facile et peut être réalisé sans utiliser JavaScript ou des scripts back-end. Cette implémentation est appelée irrégularité CSS3.

L'avantage de CSS3 Irregular est sa flexibilité et sa réactivité. Nous pouvons créer des pages parfaitement réactives pour différentes résolutions d’appareils. De plus, un bon design irrégulier peut ajouter un style unique à votre site Web.

CSS3 Les formes irrégulières sont faciles à créer, il suffit de découper la forme souhaitée et d'ajouter des couleurs autour d'elle ou d'utiliser une image d'arrière-plan pour la rendre plus attrayante.

Voyons maintenant comment créer des formes irrégulières CSS3 courantes.

1. Triangle

Le triangle est l'une des formes les plus basiques des graphiques irréguliers CSS3. Il peut être créé avec le code suivant :

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

2. Trapezoid

Un trapèze est aussi une forme simple, semblable à un triangle. Mais contrairement à un triangle, un trapèze a deux côtés courts et deux côtés longs.

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

3. Parallélogramme

Un parallélogramme est une forme irrégulière simple qui peut être créée avec le code suivant :

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

4. Oval

Oval est une autre forme irrégulière CSS3 qui peut être créée avec le code suivant Create :

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

5. Polygon

Nous pouvons créer une étoile à cinq branches avec le code suivant :

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

Summary

CSS3 Une conception graphique irrégulière n'est pas difficile. Avec les bons outils et quelques connaissances de base, il est facile de créer des formes simples. Dans la conception de pages Web, une conception graphique irrégulière peut ajouter un style unique à la page, apportant ainsi une meilleure expérience utilisateur à notre site Web.

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!