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