JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stern"></div>
<div style="margin: 0 0 50px 0"></div>
<div class="herz"></div>

CSS

div.stern {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ffc800;
  position: relative;
}

div.stern:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #ffc800;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}


div.herz {
   position: relative;
   width: 100px;
   height: 90px;
 }

 div.herz:before, div.herz:after {
   position: absolute;
   content: "";
   left: 50px;
   top: 0;
   width: 50px;
   height: 80px;
   background: red;
   border-radius: 50px 50px 0 0;
   transform: rotate(-45deg);
   transform-origin: 0 100%;
   -moz-transform: rotate(-45deg);
   -moz-transform-origin: 0 100%;
   -webkit-transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -o-transform: rotate(-45deg);
   -o-transform-origin: 0 100%;
 }

 div.herz:after {
   left: 0;
   transform: rotate(45deg);
   transform-origin: 100% 100%;
   -moz-transform: rotate(45deg);
   -moz-transform-origin: 100% 100%;
   -webkit-transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
   -o-transform: rotate(45deg);
   -o-transform-origin: 100% 100%;
 }