Comment dessiner des triangles et des parallélogrammes avec CSS

Récemment, j'ai vu de nombreux tutoriels sur Internet vous expliquant comment utiliser CSS pour dessiner des graphiques. Aujourd'hui, je vais vous résumer comment utiliser des feuilles de style CSS pour dessiner des triangles et des parallélogrammes. Ceux qui sont intéressés peuvent l’étudier en profondeur.

La première méthode : Utiliser la bordure

Un rectangle pour joindre deux triangles pour enfin créer un parallélogramme. Pourquoi des triangles peuvent-ils être générés à l’aide de bordures ? Jetons d'abord un coup d'œil à une image :

Après avoir regardé le processus de changement des trois petites formes de l'image, vous devriez déjà en comprendre la moitié. En fait, le piratage ne nécessite que deux conditions pour créer un triangle. Premièrement, la longueur et la largeur de l'élément lui-même sont égales à 0. Deuxièmement, les parties inutiles sont masquées via border-color. Grâce à une méthode similaire, vous pouvez également créer des trapèzes. Les codes des trois formes de l'image ci-dessus sont les suivants. (Vous trouverez ci-joint un exemple de CodePen, http://codepen.io/jerryzou/pen/mJYJym)

#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

L'étape suivante consiste à réfléchir à la façon d'épisser un parallélogramme . Dans la méthode des bordures, il se compose de trois parties, à savoir le triangle gauche, le rectangle et le triangle droit. Il serait trop fastidieux de créer trois éléments à chaque fois qu'un parallélogramme est dessiné, donc les pseudo-éléments :before et :after sont un bon choix ici. Obtenons cet effet :

Afin d'assembler de manière transparente des triangles et des rectangles, plusieurs attributs doivent être cohérents, utilisez donc quelque chose comme Less, Sass, Stylus et autres Les préprocesseurs CSS faciliteront la maintenance de ce code. La version Scss du code est donnée ci-dessous. (Ci-joint le lien CodePen, http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)

//三角形的宽高
$height: 24px;
$width: 12px;
 
//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}
 
//单个三角形的样式
@mixin triangle() {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}
 
//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;
 
  &:after {
    @include triangle();
    right: -$width;
  }
 
  &:before {
    @include triangle();
    left: -$width;
  }
 
  @include parallelogram-color(red);
}

Il est à noter que si la pente du triangle fixée par $height et $width est trop Petit ou trop grand peut provoquer un rendu irrégulier, vous devez donc tester les effets visuels de différentes largeurs et hauteurs lors de son utilisation.

La deuxième méthode : utiliser la transformation

La méthode d'utilisation de la transformation pour réaliser un parallélogramme est ce que j'ai vu lorsque je faisais mes achats. comme ceci :

Après l'avoir vu, j'ai trouvé que c'était incroyable. Il s'avère qu'il ne peut avoir que le contour extérieur d'un parallélogramme. (Parce que la méthode ne permet de créer que des parallélogrammes avec des effets de remplissage) Elle est très simple à mettre en œuvre, principalement à l'aide de transform : skew(...).

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>
 
<div class="city">上海</div>

Nous avons donc obtenu cet effet :

Vous devez penser à cela lorsque vous voyez la photo :

Ne vous inquiétez pas, nous avons effectivement déformé l'ensemble du div, provoquant l'inclinaison du texte au milieu, et ce n'est évidemment pas l'effet souhaité. Nous devons donc ajouter un élément interne et déformer à l'envers l'élément interne pour obtenir l'effet souhaité :

Le code d'implémentation est le suivant, ci-joint un CodePen exemple (http://codepen.io/jerryzou/pen/BNeNwV?editors=110)

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
 
.city div {
  transform: skew(20deg);
}
</style>
 
<div class="city">
  <div>上海</div>
</div>

Résumé

La première méthode utilise le hack d'attribut border pour créer un triangle, Et en épissant trois éléments, un parallélogramme est finalement obtenu tandis que la deuxième méthode utilise transform: skew pour obtenir un parallélogramme ; Dans l’ensemble, la deuxième méthode est beaucoup plus petite que la première et facile à comprendre. Le seul inconvénient est qu'il ne peut pas construire de trapèzes comme ceux utilisés dans la pagination de ce site.

J'espère que cet article sera utile à tout le monde. En fait, le même principe s'applique. Des carrés, des rectangles et certaines figures équilatérales peuvent également être réalisés en utilisant cette méthode.

Lecture recommandée :

Comment créer QQ Penguin avec html et css

Utilisez CSS 3 pour créer une ombre longue

css pour obtenir un visage de chat en mouvement

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!