Teardrop

by Daniel Pietrasik

HTML

<!-- 
 - CSS4 zaawansowane kształty rysowane z kodu
 - https://danielpietrasik.pl/css4-zaawansowane-ksztalty-rysowane-z-kodu/
-->

<div id="teardrop"></div>

CSS

/**
 * CSS4 zaawansowane kształty rysowane z kodu
 * https://danielpietrasik.pl/css4-zaawansowane-ksztalty-rysowane-z-kodu/
 **/
 
#teardrop {
  font-size: 90px; /* Sterowanie rozmiarem figury. */
  width: 1em;
  height: 1em;
  background-color: #f34a53;
  border-radius: .6em 1em 0 1em;
  transform: rotate(-135deg);
  margin: 60px auto;
}