I’m trying to create the following square with a triangle on the top. The closest I was able to come was the following code:

https://codepen.io/joe902101/pen/vYwRmjP

<div class='square arrow'>
</div>

.square {
  width: 20px;
  height: 20px;
  background: #FF0000;
  outline: 1px solid #000;
  outline-offset: 4px;
}

.arrow::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
}

Any ideas on how to solve this?