How can I create two borders or box shadows around an image?

Question

I'm trying create this background/border using only CSS but I have some difficulties:

My code:

.profile-userpic img {
    width: 80%;
    background-color: transparent;
    box-shadow: -10px -10px 0 0px #291026, 10px 10px 0 0px #f00;
}

<div class="profile-userpic">
    <img src="{% get_avatar_url usuario %}" class="img-responsive " alt="">
</div>

Actually I got this:

I need just transform the red background in a transparent object with border, just like the original design

The picture needs to be responsive and I need to use this 'border/background' in others elements like a button or div.

Answer 1

This should get you started, not responsive, but shows one way it can be accomplished.

 .profile-userpic img { transform:translateY(20px) translateX(30px); } .profile-userpic:before { content:''; display:block; width:250px; height:280px; background:black; position:absolute; z-index:-1; } .profile-userpic:after { content:''; display:block; width:250px; height:280px; border:1px solid black; position:absolute; z-index:-1; top:22px; left:60px; } 

 <div class="profile-userpic"> <img src="http://placehold.it/250" class="img-responsive " alt=""> </div> 

Answer 2

 .ctn { width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; } .picture { width: 200px; height: 200px; background-color: purple; position: relative; } .picture:before { position: absolute; background: red; content:''; width: 100%; height: 108%; top:-12px; left:-12px; z-index: -1; } .picture:after { position: absolute; background: transparent; border: 2px solid red; content:''; width: 105%; height: 107%; top:-6px; left:10px; z-index: -1; } 

 <div class="ctn"> <div class="picture"></div> </div> 

Have you considered using :before and :after elements instead:

have a look at this sample I made:

https://jsfiddle.net/bo2nn6kk/

All you need to do is position it appropriately and adjust width and height.

Answer 3

Here is a fiddle that should help. :before , :after , and z-index are valuable for something like this.

CSS

.profile-userpic {
  position: relative;
  display: inline-block;
}

.profile-userpic:before,
.profile-userpic:after {
  z-index: 1;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

.profile-userpic:before {
  background-color: red;
  top: -8px;
  left: -12px;
}

.profile-userpic:after {
  background-color: #fff;
  border: 1px solid red;
  bottom: -25px;
  right: -25px;
}

.profile-userpic img {
  z-index: 2;
  position: relative;
}

https://jsfiddle.net/d6tv5jp3/3/