Maison > interface Web > tutoriel CSS > Comment puis-je dessiner des triangles dans le coin d'un div en utilisant des pixels ou des pourcentages ?

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

Mary-Kate Olsen
Libérer: 2024-11-03 02:29:29
original
1010 Les gens l'ont consulté

How can I draw triangles in the corner of a div using either pixels or percentages?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal