Estoy tratando de hacer la siguiente forma usando solo CSS. Sé que lograr esta forma usando una imagen o SVG sería mucho más fácil, pero estoy tratando de lograrlo con CSS como prueba de concepto.

El siguiente es el código que he probado hasta ahora. Crea una forma de diamante usandotransform: rotate(45deg) pero las diagonales son de la misma longitud, mientras que la forma que necesito tiene una diagonal muy larga y otra muy corta.

.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

¿Es posible crear la forma que necesito usando CSS?

Nota: A pregunta similar se le preguntó anteriormente y se cerró / eliminó como "demasiado amplio" ya que no mostraba ningún intento de codificación. Publicar una nueva pregunta y responderla en función deesta meta discusión. No dude en agregar soluciones alternativas (o) edite la pregunta para que sea más útil para futuros lectores.