.sotd-triangle-divider {
    --sotd-divider-colour: #00b4ff;
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}

.sotd-triangle-divider__shape {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--sotd-divider-colour);
}

/* Edges are 30px high, centre is 0px high. */
.sotd-triangle-divider--down .sotd-triangle-divider__shape {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%);
}

.sotd-triangle-divider--up .sotd-triangle-divider__shape {
    clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
}