CSS peut-il créer des coins inclinés et découper des images tout en conservant une bordure visible ?

Création de coins inclinés CSS et découpage d'images

Le CSS peut-il être exploité pour créer une forme spécifique, impliquant un coin incliné à 45 degrés ? De plus, l'exigence inclut le découpage d'une image dans la forme, ce qui revient à utiliser un masque où la bordure grise reste visible.

En explorant la faisabilité de cette tâche strictement au sein de CSS, il devient évident que le maintien de la bordure pose des défis. Néanmoins, une solution a été conçue en utilisant les pseudo-éléments :before et :after en conjonction avec un conteneur parent. Puisque :before et :after ne peuvent pas être appliqués directement à une balise img, l'approche suivante est adoptée :

1. Établissez une bordure pour l'élément conteneur.
2. Créez un élément :before pour obstruez un coin et décalez son positionnement de -1px pour masquer la bordure.
3. Ajoutez un élément :after avec un léger décalage par rapport à l'élément :before pour générer la ligne à l'intérieur la coupe.

Bien que cette approche se rapproche de l'effet souhaité, elle rencontre un problème avec l'épaisseur de la ligne inclinée à 45 degrés. Voici l'extrait de code CSS :

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

Et voici un exemple HTML :

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