How to inscribe the following shape with CSS inside div?

FIDDLE

HTML

<div id="DiamondCenter">
    <div id="triangle-topleft"></div>
</div>

CSS

#DiamondCenter {
    position:fixed;
    top:2%;
    left:48%;
    background: #24201a;
    height:40px;
    width:40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:20 !important;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid gray;
    border-right: 40px solid transparent;
}

via Chebli Mohamed