.element::before {
content: "";
position: absolute;
top: -18px; /* positions arrow on top of container */
left: 50%; /* works with transform to center the arrow */
transform: translateX(-50%);
border: 10px solid; /* creates a 10px box */
/* border-color: red green yellow black; */
border-color: transparent transparent white transparent;
/* the red/green etc used for testing, then swap to transparent version */
}