JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div class="container statement">
<!--  FIXME: should make this a before block that adds the BG, then no container necessary to add border & shadow  -->
  <div class="clip-polygon block">waitUntil( 2000 )</div>
</div>

CSS

:root{  
  /* declare variables can be on .block::before */
  --cornerSize:5px;
  --blockPadding:10px;
  --notchOffset:40px;
  --notchWidth:40px;
  --notchHeight:10px;
}

.statement{
  position:relative;
}

.statement::before {
  clip-path: 
    polygon(  
      0 var(--cornerSize),  /* top left corner */
      var(--cornerSize) 0,
      
      var(--notchOffset) 0, /* top notch */
      calc(var(--notchOffset) + var(--notchHeight)) var(--notchHeight),
      calc(var(--notchOffset) + var(--notchWidth))  var(--notchHeight),
      calc(var(--notchOffset) + var(--notchWidth) + var(--notchHeight)) 0, /* end of top notch */
              
      calc(100% - var(--cornerSize)) 0, /*top right corner */
      100% var(--cornerSize),
      
      100% calc(100% - var(--blockPadding) - var(--cornerSize)), /* bottom right corner */
      calc(100% - var(--cornerSize)) calc(100% - var(--blockPadding)),
      
      calc(var(--notchOffset) + var(--notchWidth) + var(--notchHeight)) calc(100% - var(--blockPadding)), /* bottom notch */
      calc(var(--notchOffset) + var(--notchWidth)) 100%,
      calc(var(--notchOffset) + var(--notchHeight)) 100%,
      var(--notchOffset) calc(100% - var(--blockPadding)),  /* end of bottom notch */
      
      var(--cornerSize) calc(100% - var(--blockPadding)), /* bottom left corner */
      0 calc(100% - var(--blockPadding) - var(--cornerSize))
    );
    
    background-color:darkblue;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.block{
  font-family:monospace;
  font-size:16px;
  font-weight:bold;
  color:white;
  display:inline-block;
  padding-top:10px;
  /* padding-bottom:calc(var(--blockPadding) + var (--cornerSize)); */
  /* padding-bottom:15px; */
  padding-left:10px;
  padding-right:10px;
  transition-property: min-width, min-height;
  transition-duration: 400ms;
  transition-timing-function: ease-in-out;
  min-width:100px;
  min-height:20px;
  
  
}

.block:hover{
  min-width:400px;
 ...