Why is css selector Before and After not working?

Question

i have started working with ::before and ::after but when i try to make something i cant seem to get a triangle to appear on the screen. Here is my code.

Index.php

<div class="menu">

    </div>

external-style.css

.menu{
    height: 50px;
    width: 50px;
    background: red;
}
.menu::before{
    width: 0;
    height: 0;
    border-left: 115px solid transparent;
    border-right: 115px solid transparent;
    border-top: 115px solid #222;
}

Can someone please tell me what i am doing wrong with this?