JSFiddle - React, Tailwind, and code Playground

by AlexGun

HTML

<div class = "wrap">
<span class="arrow">
  <span class = "circle left"></span>
  <span class = "circle right"></span>
</span>
</div>

SCSS

.wrap {
  width:100px;
  height: 10px;
  position:absolute;
}

.arrow {
  width: 80px;
  display: inline-block;
  height: 2px;
  background-color: red;
  margin: 40px auto;
  position: relative;

  &::before {
    content: '';
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    transform: rotate(45deg) translateX(0);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 25px;
    top: -15px;
    background-color: #fff;
  }
}

.circle {
  position: absolute;
  width:8px;
  height:8px;
  border: 1px solid black;
  border-radius:100%;
  top: 0;
}

.left {
  left: 13px;
}

.right {
  left: calc(100% - 21px);
}