Me gustaría lograr este resultado (ver esta imagen de ejemplo).

enter image description here

Primero, he intentado crear bordes parciales con CSS (usando div:after). Problema: Tengo varias imágenes con diferentes formatos y no funciona correctamente. Entonces, he intentado con un div de fondo con position: relative y una imagen en position: absolute.

Funciona pero no es fácil de manejar en modo receptivo. Necesito establecer un con y una altura para el div que contiene la imagen y, en algún momento, el contenedor es demasiado grande.

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

¿Hay alguna otra forma de lograr esto?

2
Sébastien Gicquel 27 sep. 2019 a las 17:14

4 respuestas

La mejor respuesta

Ni siquiera necesita envolver sus elementos <img> con <div>: usar box-shadow hará el truco:

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

El problema con el ajuste usando un <div> es que es un elemento de nivel de bloque por defecto, y tiene un ancho de 100% a menos que se especifique lo contrario. Esto hace que sea difícil "encoger" el elemento alrededor de su elemento <img>, ya que su imagen tiene un tamaño indeterminado.

4
Terry 27 sep. 2019 a las 14:18
.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>
3
demkovych 27 sep. 2019 a las 14:17

¿Qué hay de las sombras de caja?

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">
2
Jonas Grumann 27 sep. 2019 a las 14:19
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>
2
Tiago 27 sep. 2019 a las 14:20