Search code examples
cssborderbox-shadow

CSS "2D" border issue

I'm trying to do this border, but I cant get it to work, I was wondering if anyone has any idea of how to accomplish this:

CSS Border

So far this is what I've got, I am trying with box shadow, but I can use any other 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;   
}

Thanks in advance.

Solution

  • Here's box-shadow's doc : https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    Negative values for x (aka h-shadow in the doc) just make it go to the left, negative values for y (aka v-shadow in the doc) just make it go to the top.

    Since you don't need blur or spread you can omit them (they are optional).

    Therefore, just add these few tweaks and you'll be ready to go :

    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;
}

    You can, for instance, try (with 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;
}