• Bordure sur clip

    Lorsque nous utilisons les codes CSS "clip", nous pouvons sélectionner une partie d'une image selon la forme choisie. site https://bennettfeely.com/clippy/

    Cependant, nous ne pouvons pas placer une bordure autour de la sélection car elle fait comme si elle découpait au ciseau une partie de la grande image.

    On peut ruser, en plaçant, dessous, une forme similaire, un peu plus large pour qu'elle déborder de la sélection et simule une bordure, de la couleur choisie.

    Pour cela, j'ai hébergé sur Ekla, un cadre blanc qui me sert de forme à placer sous la sélection: exemple:

    Survol

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/xMp403OM3dkY4Z12VUmzcheAaVQ@1152x648.jpg'); background-size: cover;">
    <p id="bord0">Survol</p>
    <p id="bord1a">&nbsp;</p>
    <p id="bord1b">&nbsp;</p>
    </div>

    <style><!--
    #bord0{position:absolute; z-index:1; width:15vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(2vw,2vw);}
    #bord1a{position:absolute; z-index:1; width:20.5vw; height:20.5vw; background:url('http://ekladata.com/ti-haLj5EB8vyM26acwQssWAuNY');-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); transform:translate(18vw,4.75vw);}
    #bord1b{position:absolute; z-index:2; width:20vw; height:20vw; background:url('http://ekladata.com/-3gY7i6NJHD1DfaJw-l10ze8XpU@1152x648.jpg');-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform:translate(18.25vw,5vw); transition:all 1s linear;}
    #bord1b:hover{z-index:5; width:60vw; height:33.75vw;-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); transform:translate(0vw,0vw);}
    --></style>