JSFiddle - React, Tailwind, and code Playground

new blocks using polygon masks

by nilloc

HTML

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

CSS

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

.statement{
  --block-color:hsl(0,0%,100%);
  
  --border-width:0px;
  
  --notch-depth:6px;
  --notch-offset:14px;
  --notch-width:28px;
  
  --notch-corner-x1:1px;
  --notch-corner-y1:0px;
  --notch-corner-y2:0.25px;
  --notch-corner-x2:0px;
  --notch-corner-x3:0.7px;
  --notch-corner-y3:0.7px;
  
  --bottom:calc(100% - var(--notch-depth));
  
  --corner1:0px;
  --corner2:0.25px;
  --corner3:1.1px;
  --corner4:2.5px;
  --corner5:4px;
  
  
}

.statement::before{
  --border-width:0px;
  
  --notch-corner-x1:calc(1px + 1px);
  --notch-corner-y1:calc(1px + 0px);
  --notch-corner-x2:calc(1px + 0px); /* TODO: fixe offsets to handle moeve one to the left or right */
  --notch-corner-y2:calc(1px + 0.25px);
  --notch-corner-x3:calc(1px + 0.7px);
  --notch-corner-y3:calc(1px + 0.7px);
  
  --bottom:calc(100% - var(--notch-depth) - 1px);
  
  --corner1:calc(1px + 0px);
  --corner2:calc(1px + 0.25px);
  --corner3:calc(1px + 1.1px);
  --corner4:calc(1px + 2.5px);
  --corner5:calc(1px + 4px);
}

.statement,
.statement::before{
  --notch-x1:calc(var(--notch-offset) - var(--notch-corner-x1));
  --notch-y1:var(--notch-corner-y1);
  --notch-x2:calc(var(--notch-offset) - var(--notch-corner-x2));
  --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)...