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: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 edge */
    linear-gradient(
      0deg, /* 0deg goes from bottom to top */
      hsl(44,100%, 50%) 0%,
      hsl(44,100%, 50%) 100%
    ),
    /* top-left-notch corner */
    radial-gradient(
      hsl(44,100%, 50%) 2px,
      transparent 0px
    ),
    /* top-left-notch */
    linear-gradient(
      45deg, /* 0deg goes from bottom to top */
      transparent 0 8px,
      hsl(44,100%, 50%) 8px
    ),
    /* top-right-notch corner */
    radial-gradient(
      hsl(44,100%, 50%) 2px,
      transparent 0px
    );
  background-size:
    14px 100%,   /*left-edge */
    4px 4px,     /* top-left-notch corner */
    6px 6px,     /* top left notch */
    4px 4px;     /* top-right-notch corner */
    
  background-position:
    left 0px     top 0px,
    left 12px    top 0px,
    left 20px    top 0px,
    left calc()  top 0px;
    
  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 to do better when the first shadow is 1px blur :(  */
}

.gradient:after{
  content:"";
  height:10px;
  width:40px;
  position:absolute;
  bottom:-9px;
  left:20px;
  background-repeat:no-repeat;
  background-image:
  /* left top of notch */
    linear-gradient(
      45deg,
      transparent 0px 8px,
      red 8px
    ),
    /* bottom of notch */
    linear-gradient(
      0deg,
      transparent 0px 1px,
      red 1px
    ),
   ...