JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

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

CSS

:root {
  --arrow-size: 40px;
  --border-width: 2px;
  margin: 100px;
}

.arrow {
  border: var(--arrow-size) solid transparent;
  transform: rotate(45deg);
  border-top-color: red;
  border-left-color: blue;
  height: 0;
  width: 0;
  position: relative;
}

.arrow-border {
  position: absolute;
  border-top: var(--border-width) solid black;
  border-left: var(--border-width) solid black;
  top: calc(var(--arrow-size) * -1 - var(--border-width));
  right: calc(var(--arrow-size) * -1);
  bottom: calc(var(--arrow-size) * -1);
  left: calc(var(--arrow-size) * -1 - var(--border-width));
}