Teardrop

<div class="container">
<!-- Display the content vertically -->
<div class="container__content">
...
</div>
</div>
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Border */
border: 2px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 50% 50% 50%;
/* Angle at the top */
transform: rotate(45deg);
/* Size */
height: 64px;
width: 64px;
}
.container__content {
transform: rotate(-45deg);
}