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

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

DDD
Libérer: 2024-11-25 03:52:10
original
363 Les gens l'ont consulté

Can CSS Create Angled Corners and Clip Images While Maintaining a Visible Border?

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

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

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal