JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="arrow-down"></div>

CSS

body {
  display: grid; justify-content: center; align-content: center; height: 100vh;
}

.arrow-down {
  width: 4rem;
  height: 9rem;
  background: linear-gradient(45deg, transparent calc(50% - 1px), blue 50%, transparent calc(50% + 1px)) bottom left / 2rem 2rem no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 1px), blue 50%, transparent calc(50% + 1px)) bottom right / 2rem 2rem no-repeat,
    linear-gradient(to right, transparent calc(50% - 1px), blue 50%, transparent calc(50% + 1px));
}