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.

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 7px,
      gray 7px 8px,
      red 8px
    ),
    /*left edge */
    linear-gradient(
      90deg,
      gray 0px 1px,
      red 1px
    ),
    /* top edge left */
    linear-gradient(
      180deg,
      gray 0px 1px,
      red 1px
    ),
    /* bottom edge left */
    linear-gradient(
      0deg,
      gray 0px 1px,
      red 1px
    ),
    /* bottom left corner*/
    linear-gradient(
      45deg,
      transparent 0px 7px,
      gray 7px 8px,
      red 8px
    ),
    /* left top of notch */
    linear-gradient(
      225deg,
      transparent 0px 7px,
      gray 7px 8px,
      red 8px
    ),
    /* top of notch */
    linear-gradient(
      180deg,
      gray 0px 1px,
      red 1px
    ),
    /* top right notch corner */
    linear-gradient(
      135deg,
      transparent 0px 7px,
      gray 7px 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;
}

.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 7px,
      gray 7px 8px,
      red 8px
    ),
    /* bottom of...