Я пытаюсь сделать форму ниже, используя только CSS. Я знаю, что добиться этой формы с помощью изображения или SVG было бы намного проще, но я пытаюсь добиться этого с помощью CSS для подтверждения концепции.

Ниже приведен код, который я пробовал до сих пор. Это создает форму ромба с помощьюtransform: rotate(45deg) но диагонали имеют одинаковую длину, тогда как форма, которая мне нужна, имеет одну очень длинную диагональ, а другую очень короткую.

.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);
}

Скрипка Демо

Можно ли создать нужную мне форму с помощью CSS?

Замечания: A аналогичный вопрос был задан ранее и был закрыт / удален как «слишком широкий», так как не показывал попытки кодирования. Публикация нового вопроса и самостоятельного ответа на него на основеэто мета обсуждение, Пожалуйста, не стесняйтесь вносить альтернативные решения (или) отредактируйте вопрос, чтобы сделать его более полезным для будущих читателей.