Comment puis-je créer des coins inclinés en CSS sans utiliser SVG ou Canvas ?

Coins angulaires en CSS : une technique de pointe

Concevoir un site Web esthétiquement agréable peut être un défi, surtout lorsqu'il s'agit de créer des angles coins. Cependant, grâce aux progrès du CSS, il est désormais possible d'obtenir cet effet sans recourir à des méthodes non natives comme SVG ou Canvas.

Créer le coin incliné

Pour créez un coin incliné, nous pouvons exploiter les pseudo-éléments :before et :after avec un conteneur parent. En manipulant la position, les styles de bordure et les décalages de ces éléments, nous pouvons bloquer efficacement un coin tout en préservant la bordure.

Étape 1 : Bordure du conteneur

Commencer en ajoutant une bordure à l'élément conteneur pour définir les limites extérieures de notre coin incliné.

Étape 2 : :avant Pseudo-élément

Ensuite, ajoutez le pseudo-élément :before pour couper le coin souhaité. Positionnez-le de manière absolue, avec un décalage négatif de -1px pour couvrir la bordure. Appliquez une bordure unie en haut et une bordure transparente à droite pour créer la ligne inclinée.

Étape 3 : :après le pseudo-élément

Pour créer la ligne à l'intérieur de la coupure, ajoutez le pseudo-élément :after avec un décalage légèrement plus petit de -2px. Donnez-lui une bordure blanche unie en haut et une bordure transparente à droite.

Exemple de mise en œuvre

Le code CSS suivant montre comment appliquer ces principes :

.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;
}

Ce code peut être utilisé pour envelopper un élément d'image dans un conteneur, ce qui donne une image avec l'angle spécifié coin.

Approche alternative

Bien que les techniques CSS puissent fournir une solution, si un contrôle précis sur le coin incliné est requis ou si des fonctionnalités supplémentaires telles que le masquage ou le découpage d'image sont souhaitées, l'utilisation de SVG ou de Canvas peut être une approche plus appropriée.

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!