Me gustaría lograr este resultado (ver esta imagen de ejemplo).
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?
4 respuestas
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.
.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>¿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">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>