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));
}