Comment puis-je dessiner des triangles dans le coin d'un div en utilisant des pixels ou des pourcentages ?

Dessiner des triangles dans le coin d'une division

Question :

Dans une page Web, comment dessiner des triangles dans le coin d'un div en utilisant soit des valeurs de pixels spécifiques, soit des valeurs de pourcentage ?

Réponse :

Il existe deux approches principales pour y parvenir :

Utilisation du positionnement absolu et des astuces de bordure :

1. Positionnez l'élément triangulaire de manière absolue et définissez ses propriétés supérieure et droite sur 0.
2. Définissez les dimensions du triangle à l'aide de la bordure- propriétés de largeur et de couleur de bordure. Par exemple, le code suivant dessine un triangle vert dans le coin supérieur droit à l'aide d'astuces de bordure :

<code class="css">.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}</code>

Utilisation de la rotation et du découpage :

1. Positionnez l'élément triangulaire relativement à l'intérieur du div.
2. Faites pivoter l'élément triangulaire de 45 degrés à l'aide de transform : rotate(45deg).
3. Masquez l'excédent de triangle qui s'étend au-delà de la limite du div à l'aide du débordement : caché.

Voici un exemple d'utilisation de cette approche :

<code class="css">.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: relative;
  top: 10%;
  left: 90%;
  width: 10%;
  height: 10%;
  -webkit-transform: rotate(45deg);
  background: green;
}</code>

Les deux méthodes permettent de personnaliser la forme et la position du triangle à l'aide de pourcentages ou de valeurs absolues, offrant ainsi une flexibilité dans la page Web. conception.

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!