Comment puis-je créer des coins inclinés en CSS en utilisant uniquement les pseudo-éléments :before et :after ?

Coins angulaires en CSS : une solution détaillée

Créer des coins angulaires en utilisant du CSS pur est possible, même si cela présente certains défis. Pour y parvenir, il est nécessaire d'utiliser les éléments :before et :after dans un conteneur parent qui a une bordure.

1. Ajouter une bordure au conteneur : Établissez une bordure autour du élément conteneur pour définir la limite visible.
2. Créez un élément :before pour bloquer un coin : Ajoutez un élément :before avec un style de bordure supérieure spécifié en pixels pour créer une ligne perpendiculaire solide. Décalez cet élément de -1 pixel pour tenir compte de la bordure du conteneur.
3. Ajoutez un élément :after pour créer une ligne intérieure : Introduisez un élément :after avec un décalage légèrement plus petit que l'élément :before. Définissez le style de bordure supérieure de l'élément :after sur une couleur différente, telle que le blanc, pour créer une ligne contrastée dans la zone de coupure.

Bien que cette technique se rapproche de l'effet souhaité, elle peut introduire un léger problème avec l'épaisseur de la ligne à 45 degrés.

Exemple Code :

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}

<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

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!