tumbado

by jpeter06

HTML

<div class="flex relative h-3rem" >
<span>Hola</span>
<svg fill="orange" class="h-full w-1rem" preserveAspectRatio="none" viewBox="0 0 7.64 12.7">
  <path d="M 0,0 C 0,0 0.149276,0 2.4537772,0.00626408 4.7582785,0.03957913 7.5670356,4.3758758 7.598715,6.4478773 7.6303944,8.5198788 4.7191615,12.668871 2.4537773,12.705743 0.1883931,12.742613 0,12.701565 0,12.701565 Z"></path>
</svg>
</div>
<span>Hola</span><span class="rsideTomb">.</span>

CSS

html, body{
  padding:0px; margin:0px;
  width:100%; height:100%;
  overflow:hidden;
  font-size:3rem;
  background:red;
}
span{
  background-color: orange;
}
.rsideTomb {
  width: 1rem;
  clip-path: polygon(0 0, 100% 0%, 0% 100%, 0% 100%);
}

.relative { position:relative !important;}
.flex{ display:flex !important; background:tan}
.h-3rem { height:3rem !important;}
h-full { height:100% !important;}
.w-1rem { width:1rem !important;}
.w-2rem { width:2rem !important;}
.w-3rem { width:3rem !important;}