<div class='parent'>
<div class='center'></div>
<svg class='icon' width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32 16C32 7.16485 24.8351 0 16 0C7.16485 0 0 7.16485 0 16C0 24.8351 7.16485 32 16 32C24.8351 32 32 24.8351 32 16Z" fill="#E04F5F"/>
<path d="M17.8703 16L22.5458 10.57C23.0553 9.97665 22.9908 9.08668 22.3975 8.57076C21.8042 8.06129 20.9142 8.12578 20.4047 8.71909L16.0001 13.8332L11.6018 8.72554C11.0924 8.13223 10.1959 8.06774 9.60264 8.57721C9.00933 9.08668 8.94484 9.9831 9.45431 10.5764L14.1298 16L9.45431 21.4301C8.94484 22.0234 9.00933 22.9134 9.60264 23.4293C9.86705 23.6615 10.1959 23.7711 10.5248 23.7711C10.9247 23.7711 11.3181 23.6034 11.5954 23.281L15.9936 18.1733L20.3918 23.281C20.6691 23.6034 21.069 23.7711 21.4624 23.7711C21.7913 23.7711 22.1202 23.6615 22.3846 23.4293C22.9779 22.9198 23.0424 22.0234 22.5329 21.4301L17.8703 16Z" fill="white"/>
</svg>
</div>
* {
width: 100vw;
height: 100vh;
padding: 0;
/* margin: 1rem; */
/* box-sizing: border-box; */
}
.parent {
margin: 2rem;
width: 300px;
height: 300px;
position: relative;
background-color: rgba(224, 79, 95, .2);
border-radius: 4px;
border: dashed rgba(224, 79, 95, 1) 2px;
}
.center {
width: 100px;
height: 100px;
border: 2px solid rgba(224, 79, 95, 1);
background-image: url("https://i.kym-cdn.com/entries/icons/mobile/000/001/007/WAT.jpg");
background-position:center;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
}
.icon {
position: absolute;
width: 1.5rem;
height: 1.5rem;
top: 1rem;
left: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.