JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div id="asd">
  <div class="mid">
  
  </div>
</div>

SCSS

body {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#asd {
  --angle: 70deg;  

  position: absolute;
  width: 300px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -150px;
  background: rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    left: 39.5%;
    /* background: red; */
    border-top: 3px solid white;
    border-right: 3px solid white;
    box-sizing: border-box;
    transform: rotate3d(0, 0, 0.5, 45deg) rotate3d(0.5, 0.5, 0, 70deg);
    
    z-index: 1;
  }
  
  /* &::after {
    transform: translate(-98%, -22%) rotate(calc(var(--angle) * -1));
    border-top: none;
    border-bottom: 3px solid white;
  } */
  
/*   .mid {
    position: absolute;
    width: 1px;
    left: 50%;
    top: 0;
    bottom: 0;
    background: black;
    z-index: 2;
  } */
}