.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 */
}