JSFiddle - React, Tailwind, and code Playground

hardware label test

by nilloc

HTML

<div class="thing">
  <div class="label">
    <span>thing name</span>
    <div class="label-sprout"></div>
  </div>
</div>

CSS

*{
  box-sizing:border-box;
}

.thing{
  position:absolute;
  top:100px;
  left:200px;
  width:150px;
  height:100px;
  background-color:hsla(20,50%,50%,0.5);
}

.label{
  position:absolute;
  top:-40px;
  right:calc(100% - 40px);
  white-space:nowrap;
  font-family:Helvetica;
  font-weight:bold;
  color:darkgray;
  
  border-bottom:2px solid darkgray;
  padding-bottom:2px;
}

.label-sprout{
  border-top:2px solid darkgray;
  border-radius:0px;
  width:40px;
  position:absolute;
  left:100%;
  top:100%;
  
  transform-origin: top left;
  transform:rotate(30deg);
}

/* .label-sprout{
  border-bottom:2px solid darkgray;
  width:40px;
  position:absolute;
  left:calc(100% - 1px);
  bottom:-2px;
  
  transform-origin: bottom left;
  transform:rotate(30deg)
} */