JSFiddle - React, Tailwind, and code Playground

new blocks using polygon masks

by nilloc

HTML

<div class="statement">tester</div>
<br>
<div class="statement">tester with more length</div>
<br>
<div class="statement">tester with more<br>
lines</div>

CSS

body{
  background-color:hsl(0,0%,80%);
}

.statement{
  --block-color:hsl(0,0%,50%);
  
  --notch-depth:6px;
  --notch-offset:14px;
  --notch-width:28px;
  
  --notch-corner-x1:1px;
  --notch-corner-y2:0.25px;
  --notch-corner-x3:0.7px;
  --notch-corner-y3:0.7px;
  
  --notch-x1:calc(var(--notch-offset) - var(--notch-corner-x1));
  --notch-y1:0px;
  --notch-x2:var(--notch-offset);
  --notch-y2:var(--notch-corner-y2);
  --notch-x3:calc(var(--notch-offset) + var(--notch-corner-x3));
  --notch-y3:var(--notch-corner-y3);
  
  --notch-x4:calc(var(--notch-offset) + var(--notch-depth) - var(--notch-corner-x3));
  --notch-y4:calc(var(--notch-depth) - var(--notch-corner-y3));
  --notch-x5:calc(var(--notch-offset) + var(--notch-depth));
  --notch-y5:calc(var(--notch-depth) - var(--notch-corner-y3));
  --notch-x6:calc(var(--notch-offset) + var(--notch-depth) + var(--notch-corner-x3));
  --notch-y6:var(--notch-depth);
  
  --notch-x7:calc(var(--notch-offset) + var(--notch-width) - var(--notch-corner-x1));
  --notch-y7:var(--notch-depth);
  --notch-x8:calc(var(--notch-offset) + var(--notch-width));
  --notch-y8:calc(var(--notch-depth) - var(--notch-corner-y3));
  --notch-x9:calc(var(--notch-offset) + var(--notch-width) + var(--notch-corner-x3));
  --notch-y9:calc(var(--notch-depth) - var(--notch-corner-y3));
  
  --notch-x10:calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth) - var(--notch-corner-x1));
  --notch-y10:var(--notch-corner-y3);
  --notch-x11:calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth));
  --notch-y11:var(--notch-corner-y2);
  --notch-x12:calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth) + var(--notch-corner-x3));
  --notch-y12:0px;
  
  /* --notch-x2:calc(var(--notch-offset) + var(--notch-depth)); */
  /* --notch-x3:calc(var(--notch-offset) + var(--notch-depth) + var(--notch-width)); */
  /* --notch-x4:calc(var(--notch-offset) + var(--notch-depth) + var(--notch-width) + var(--notch-depth)); */
 ...