a single div styled to look like the letter A:

the html:

<div class="a"></div>

the css:

.a {
    --width: 20px;
    --lr: 100px;
    --b: 220px;
    height: 0; 
    width: var(--width);
    border-left: var(--lr) solid transparent;
    border-right: var(--lr) solid transparent;
    border-bottom: var(--b) solid black;
    position: relative;
    &:before, &:after {
        content: '';
        z-index: 1;
        height: 0;
        border-left: var(--lr) solid transparent;
        border-right: var(--lr) solid transparent;
        border-bottom: var(--b) solid;
        position: absolute;
        top: calc(var(--b) * 0.2);
    }
    &:before {
        border-bottom-color: white;
        width: 0;
        transform: scale(0.6);
        left: calc((var(--lr) - (var(--width) * 0.5)) * -1);
    }
    &:after {
        border-bottom-color: black;
        width: var(--b);
        transform: scale(0.2);
        left: calc(var(--lr) * -2);
    }
}
explain? 
.explain {
    &:before {
        /* this is a triangle for the gaps */
        border-bottom-color: yellow;
    }
    &:after {
        /* this is a trapezoid for the crossbar */
        border-bottom-color: purple;
    }
}