Comment puis-je créer des bordures de coin uniquement en CSS ?

Création de bordures de coin avec CSS

En CSS, il est possible d'obtenir un aspect distinctif en affichant des bordures uniquement sur les coins d'un élément. Cet effet est couramment utilisé dans le design pour créer des cadres décoratifs ou mettre en valeur des zones spécifiques.

Solution CSS

Voici un extrait de code qui crée des bordures de coin uniquement :

img {
  --s: 50px; /* the size on the corner */
  
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Explication

Cette solution utilise le -propriété webkit-mask pour créer un dégradé conique. Le dégradé est défini avec deux arrêts de couleur distincts : un au coin (75 %) et un au début (0 %). En appliquant ce masque, la bordure est effectivement masquée sauf au niveau des coins.

Modification

Pour ajuster la taille des coins, modifiez simplement la valeur du -- est variable. De plus, vous pouvez personnaliser l'épaisseur et la couleur de la bordure comme vous le souhaitez.

Solution alternative

Certaines bibliothèques CSS, telles que PureCSS, fournissent des pré- construit des classes CSS pour les bordures de coin uniquement. Cette approche simplifie encore davantage le code :

img {
  border-radius: 10px;
}

.border-corner-only {
  border-width: 0px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 0px;
  border-left-width: 5px;
}

En enveloppant l'image dans un élément avec la classe border-corner-only, vous pouvez facilement appliquer des bordures de coin sans aucune technique de masquage complexe.

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!