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>
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].