JSFiddle - React, Tailwind, and code Playground

Making CSS only mult type dropzones with only border-radius and gradients.

by nilloc

HTML

<div class="tester" semantics-types="number boolean"></div>
<div class="tester" semantics-types="boolean number"></div>
<div class="tester" semantics-types="boolean number string"></div>

CSS

body{
  background-color:blue;
}

.tester{
  height:30px;
  width:200px;
  position:relative;
  margin:2px 0px;
  
  --boolean-offset: 4px;
  --number-offset: 20px;
  --number-ends: 30px;
  --background-opacity: 0.5;
}

[semantics-types~="number"][semantics-types~="boolean"]{
  background-image:
    linear-gradient(135deg, hsla(0,0%,100%, 0) 10px, hsla(0,0%,100%, var(--background-opacity)) 10.5px),
    linear-gradient(45deg, hsla(0,0%,100%, 0) 10px, hsla(0,0%,100%, var(--background-opacity)) 10.5px),
    linear-gradient(-135deg, hsla(0,0%,100%, 0) 10px, hsla(0,0%,100%, var(--background-opacity)) 10.5px),
    linear-gradient(-45deg, hsla(0,0%,100%, 0) 10px, hsla(0,0%,100%, var(--background-opacity)) 10.5px),
    
    radial-gradient(circle farthest-side at 30px 50%, hsla(0,0%,100%, var(--background-opacity)) 19.5px, hsla(0,0%,100%, 0) 20px),
    radial-gradient(circle farthest-side at 0px 50%, hsla(0,0%,100%, var(--background-opacity)) 19.5px, hsla(0,0%,100%, 0) 20px),
    linear-gradient(90deg, hsla(0,0%,100%, 0) var(--number-offset), hsla(0,0%,100%, var(--background-opacity)) var(--number-offset), hsla(0,0%,100%, var(--background-opacity)) calc(100% - var(--number-offset)), hsla(0,0%,100%, 0) calc(100% - var(--number-offset)) );

  background-size:
    calc(100% - (20px + var(--boolean-offset) + var(--boolean-offset))) 15px,
    calc(100% - (20px + var(--boolean-offset) + var(--boolean-offset))) 15px,
    20px 15px,
    20px 15px,
    var(--number-ends) 30px,
    var(--number-ends) 30px,
    100% 30px;
  background-position:
    left var(--boolean-offset) top 0px,
    left var(--boolean-offset) top 15px,
    right var(--boolean-offset) top 0px,
    right var(--boolean-offset) top 15px,
    
    left calc(var(--number-offset) - var(--number-ends)) top 0px,
    right calc(var(--number-offset) - var(--number-ends)) top 0px,
    left 0px top 0px;
  background-repeat:no-repeat;
  
  /* mix-blend-mode:screen;...