[Résolu] Créer un cadre en coin avec CSS dans une image

Salut,
Hello,

Je voudrais créer un genre de cadre en coin (bleu) comme sur la photo. Que le cadre rogne un peu l’image selon l’épaisseur du trait.

J’ai googlé, mais pas facile visiblement de taper la bonne requête.

Merci de votre aide.
Modifié par myself (05 Sep 2023 - 09:33)

Re. J'ai fais un truc de ce genre : CodePen

L'idée de base c'est ceci :

.corner {
  --size: 9em;
  --thickness: 0.7em;
  --color: blue;
  background-image: linear-gradient(to right, var(--color) var(--thickness), transparent var(--thickness)), linear-gradient(to left, var(--color) var(--thickness), transparent var(--thickness)), linear-gradient(to bottom, var(--color) var(--thickness), transparent var(--thickness)), linear-gradient(to top, var(--color) var(--thickness), transparent var(--thickness));
  background-position: 0 100%, 100% 0, 100% 0, 0 100%; /* @note Là je me suis retrouvé avec un décalage et... nop, je n'ai pas compris pourquoi. @todo J'ai compensé en enlevant 1%. */
  background-repeat: no-repeat;
  background-size: var(--size) var(--size);
}

Modifié par Olivier C (06 Sep 2023 - 11:44)

C’est superbe.

Merci beaucoup.

PS : l’image a un liseret blanc en bas, j’ai essayé avec une autre image, et ça ne le fait pas.

Merci encore.