Something like this should get you started:
ul.tabs li.active
{
position: relative;
overflow: visible;
}
ul.tabs li.active::before
{
content: " ";
position: absolute;
top: 100%;
left: calc(50% - 25px);
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 20px solid #0c2966;
}
Demo[
^]
- To adjust the colour of the triangle, change the
border-top
colour; - To adjust the height of the triangle, change the
border-top
size; - To adjust the with of the triangle, change the
border-left
and border-right
sizes, and the 25px
inside the calc
expression for the left
position;