JSFiddle - React, Tailwind, and code Playground

New way to draw blocks and chamfers with linear gradients and multiple background tricks from existing blocks (no more SVGs. Now using shadow filter for outlines.

by nilloc

HTML

<div class="pad">
<div class="gradient">
A shorter block
</div><br>
<div class="gradient">
Some code and stuff to make it long
</div>  
</div>

CSS

:root{
  --block-color: hsl(44, 100%, 50%);
  --block-color-test: teal;
  --notch-width: 16px;
  --notch-depth: 6px;
  --notch-offset: 14px;
}

/* Usage:
  var(--block-color)
  var(--notch-width)
  var(--notch-depth)
  var(--notch-offset)
*/
.pad{
    /* transform:scale(2) translate(30%, 30%); */
    display:inline-block;
}

.gradient {
  cursor:pointer;
  margin-bottom:10px;
  box-sizing:border-box;
  position:relative;
  /* height: 40px; */
  background-repeat:no-repeat;
  
  /* line-height:30px; */
  padding-top:6px;
  padding-bottom:6px;
  padding-left:10px;
  padding-right:10px;
  color:white;
  font-family:monospace;
  display:inline-block;
  
  border-radius: 4px;
  
  background-image:
    /* left side */
    linear-gradient(
      0deg, /* 0deg goes from bottom to top */
      var(--block-color) 0%,
      var(--block-color) 100%
    ),
    /* top left notch */
    linear-gradient(
      -135deg, /* 0deg goes from bottom to top */
      transparent 0 8px,
      var(--block-color) 8px
    ),
    /* top right notch */
    linear-gradient(
      135deg, /* 0deg goes from bottom to top */
      transparent 0 8px,
      var(--block-color) 8px
    ),
    
    /*  top right  */
    linear-gradient(
      0deg, /* 0deg goes from bottom to top */
      var(--block-color) 0%,
      var(--block-color) 100%
    ),
    
    /*  main  */
    linear-gradient(
      0deg, /* 0deg goes from bottom to top */
      var(--block-color) 0%,
      var(--block-color) 100%
    );
  background-size:
    var(--notch-offset) 100%,   /*left side */
    14px 14px,     /* top left notch */
    14px 14px,     /* top right notch */
    100% calc(var(--notch-depth) + 2px),
    100% 100%; /* main */
    
  background-position:
    left 0px     top 0px,
    left calc(var(--notch-offset) - 2px)    top 0px,
    left calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth) + var(--notch-depth))  top 0px,
    left calc(14px + var(--notch-offset) + var(--notch-width) +...