CSS « ​​2D » question de la frontière

Question

Je suis en train de faire cette frontière, mais je ne peux pas le faire fonctionner, je me demandais si quelqu'un a une idée de la façon d'y parvenir:

Alors loin c'est ce que j'ai, j'essaye avec l'ombre de boîte, mais je peux employer n'importe quelle autre solution.

<ul class="loteos-archive"> 

    <li> 

     <div class="loteos-square-bg"> 
     <a class="thumb" href="#" style="background-image:url(image.jpg);"></a> 
     </div> 

    </li> 

</ul> 

CSS:

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: -5px 4px 0px -4px blue; 
    -moz-box-shadow: -5px 4px 0px -4px blue; 
    box-shadow: -5px 4px 0px -4px blue; 
} 
ul.loteos-archive li .loteos-square-bg a.thumb{ 
    width : 100%; 
    height : 400px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
} 

Merci à l'avance.

Answer 1

Voilà box-shadow « s doc: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

valeurs négatives pour x (aka h-shadow dans le doc) il suffit de faire aller à gauche, des valeurs négatives pour y (aka v-shadow dans la doc) font juste aller à haut.

Comme vous n'avez pas besoin de flou ou de propagation, vous pouvez les omettre (ils sont facultatifs).

Par conséquent, il suffit d'ajouter ces quelques coups secs et vous serez prêt à aller:

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: /*some positive value, called Vx afterward*/px /*Vx*/px blue; 
    -moz-box-shadow: /*Vx*/px /*Vx*/px blue; 
    box-shadow: /*Vx*/px /*Vx*/px blue; 
} 

Vous pouvez, par exemple, essayer (avec Vx = 40):

ul.loteos-archive li .loteos-square-bg{ 
    height: 400px; 
    width: 100%; 
    -webkit-box-shadow: 40px 40px blue; 
    -moz-box-shadow: 40px 40px blue; 
    box-shadow: 40px 40px blue; 
}