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="gradient">
  A shorter block
</div>
<br>
<div class="gradient">
  Some code and stuff to make it long
</div>

CSS

.gradient {
  cursor:pointer;
  margin-bottom:10px;
  box-sizing:border-box;
  position:relative;
  height: 40px;
  background-repeat:no-repeat;
  
  line-height:40px;
  padding-left:10px;
  color:lightgray;
  font-family:monospace;
  display:inline-block;
  
  background-image:
    /* top left corner */
    linear-gradient(
      135deg,
      transparent 0px 8px,
      red 8px
    ),
    /*left edge */
    linear-gradient(
      90deg,
      transparent 0px 1px,
      red 1px
    ),
    /* top edge left */
    linear-gradient(
      180deg,
      transparent 0px 1px,
      red 1px
    ),
    /* bottom edge left */
    linear-gradient(
      0deg,
      transparent 0px 1px,
      red 1px
    ),
    /* bottom left corner*/
    linear-gradient(
      45deg,
      transparent 0px 8px,
      red 8px
    ),
    /* left top of notch */
    linear-gradient(
      225deg,
      transparent 0px 8px,
      red 8px
    ),
    /* top of notch */
    linear-gradient(
      180deg,
      transparent 0px 1px,
      red 1px
    ),
    /* top right notch corner */
    linear-gradient(
      135deg,
      transparent 0px 8px,
      red 8px
    ),
    
    linear-gradient(
      90deg,
      red 0%,
      red 100%
    );
  background-size:
    10px 10px,
    10px 20px,
    10px 10px,
    calc(100% - 20px) 10px,
    10px 10px,
    10px 10px,
    22px 10px,
    10px 10px,
    100% 100%;
  background-position:
    left 0px     top 0px, 
    left 0px     top 10px,
    left 10px  top 0px,
    left 10px  bottom 0px, 
    left 0px     top 30px,
    left 20px  top 0px,
    left 29px  top 9px,
    left 50px  top 0px,
    left 10px top 10px;
    filter: 
      drop-shadow(0px 0px 0.3px hsla(0,0%,60%,1))
      drop-shadow(0px 0px 0.3px hsla(0,0%,60%,1))
      drop-shadow(0px 0px 0.3px hsla(0,0%,60%,1))
      drop-shadow(0px 0px 0.3px hsla(0,0%,60%,1))
      drop-shadow(0px 3px 1px rgba(0,0,0,0.1));
      /* tricky use of multiple shadows to make outline without blur */
      /* safari seems...