¿Cómo agregar un borde transparente?
Tengo una imagen de perfil de usuario simple y un indicador de estado verde.
Quiero agregar un borde transparente al indicador, que supere la imagen en el fondo, como la imagen de abajo.
Es fácil cuando el fondo es de un solo color, solo tengo que agregar un borde con el mismo color, pero ¿qué hacer cuando el fondo es un degradado o una imagen, por ejemplo? Si agrego un borde blanco, se ve como la imagen en el medio, y me gustaría tener un render como la imagen correcta.
¿Cómo lograr eso?
.user {
display: inline-block;
position: relative;
}
img {
width: 75px;
height: 75px;
border-radius: 75px;
}
.user-state {
position: absolute;
top: 4px;
right: 4px;
width: 15px;
height: 15px;
border-radius: 10px;
background: #57d642;
}<body>
<div class="user">
<img src="http://lorempicsum.com/up/255/200/5" alt="">
<div class="user-state"></div>
</div>
</body>