Estou tentando fazer a forma abaixo usando apenas CSS. Eu sei que conseguir essa forma usando uma imagem ou SVG seria muito mais fácil, mas estou tentando obtê-la com CSS para uma prova de conceito.

O código abaixo é o que eu tentei até agora. Ele cria uma forma de diamante usandotransform: rotate(45deg) mas as diagonais têm o mesmo comprimento, enquanto a forma de que preciso tem uma diagonal muito longa e outra muito curta.

.separator{
    background: #555;
    top: 40px;
    padding-top: 0px;
    margin: 0px 40px;    
    height: 100px;
    width: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

Fiddle Demo

É possível criar a forma que eu preciso usando CSS?

Nota: A pergunta semelhante foi solicitado anteriormente e foi fechado / excluído como "muito amplo", pois não mostrou nenhuma tentativa de codificação. Postar uma nova pergunta e respondê-la automaticamente com base emessa meta discussão. Sinta-se à vontade para usar soluções alternativas (ou) editar a pergunta para torná-la mais útil para futuros leitores.