Comment puis-je créer des coins inclinés avec CSS et conserver une bordure ?

Créer des coins inclinés avec CSS

Beaucoup s'efforcent de réaliser des conceptions complexes en utilisant CSS, et la création d'un coin incliné est l'une de ces entreprises. On pourrait se demander s'il est possible de découper une image dans une telle forme, comme si on utilisait un masque qui conserve simultanément la bordure grise.

On peut envisager d'utiliser un canevas ou un SVG pour cette tâche. Cependant, il est possible d'obtenir un effet similaire avec du CSS pur en employant les éléments :before et :after dans un conteneur parent.

Tout d'abord, attribuez une bordure au conteneur parent. Ensuite, ajoutez un élément :before pour bloquer un coin et décalez-le de -1px pour couvrir la bordure. Enfin, introduisez un élément :after avec un léger décalage par rapport au :before pour créer la ligne intérieure du cut-off.

Malgré cette méthode, maintenir l'épaisseur de la ligne à 45 degrés reste un léger défi.

Considérez le code CSS et HTML suivant :

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

Cette approche se rapproche du coin incliné souhaité tout en préservant la bordure.

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!