[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)

salut pourquoi ne pas le faire dans ton image
avec ton programme de retouche photo préféré ?

Hello. Pour que le design et les choix dans le thème ne soit pas en dur dans mon CMS

On peut faire ça avec des pseudo éléments, mais c'est bien plus élégant avec des linear-gradient().
Là, je suis au boulot. Si personne ne donne la solution avant ce soir, je ferais un CodePen pour cette nuit.
Modifié par Olivier C (05 Sep 2023 - 13:40)

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.