Positioning Offset div / Images

Question

I would like to achieve this result (see this example image).

First, I’ve tried to create partial borders with CSS (using div:after). Problem : I have several images with different formats and it is not working properly. So, I’ve tried with a background div with position: relative and an image in position: absolute.

Its works but it’s not easy to handle in responsive mode. I need to set a with and a height to the div which contains the image and sometime the container is too big.

.container-image-border {
  margin-top: 40px;
  background-color: #fd9220;
  position: relative;
  width: 150px;
  height: 250px;
}

.container-image-border img {
  position: absolute;
  top: -30px;
  right: -30px;
}

<div class="container-image-border">

  <img alt="example" src="https://via.placeholder.com/150x250">

</div>

Is there an other way to achieve this ?

Answer 1

You don't even need to wrap your <img> elements with <div>: using box-shadow will do the trick:

img {
  box-shadow: -10px 10px 0 0 #fd9220;
  margin: 20px;
}

<img alt="example" src="https://via.placeholder.com/150x250">
<img alt="example" src="https://via.placeholder.com/250x150">
<img alt="example" src="https://via.placeholder.com/150x150">

The problem with wrapping using a <div> is that it is a block-level element by default, and has a width of 100% unless otherwise specified. This makes it difficult to "shrink wrap" the element around your <img> element, since your image has an undetermined size.

Answer 2

.container-image-border {
  margin-top: 40px;
  position: relative;
  width: 150px;
  height: 250px;
  box-shadow: -10px 10px 0 0 #fd9220;
}

<div class="container-image-border">

  <img alt="example" src="https://via.placeholder.com/150x250">

</div>