Positioning Offset Div / Images

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 diffe

Solution 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.

Solution 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>

Solution 3:

How about box shadows?

img {
  background-color: grey;
  box-shadow: -30px 30px 0 0 orange;
  margin-left: 40px; /* just for the presentation */
}

  <img alt="example" src="https://placehold.it/150x250">

Solution 4:

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

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

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

</div>