Как создать такую фигуру на css?

Question

[mrzgt]

Не могу придумать как создать такую фигуру на css

Answer 1

[Евгений Петров]

Используя обычные подручные рамки, linear-gradient и и transform:rotate получаем искомое.
Можно поизвращаться с perspective и rotateX, но полученный результат ужасен в FF.

И, по обыкновению, кладём фон с помощью SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="20" preserveAspectRatio="none" viewBox="0 0 60 20">
	<path fill="#ffb600" d="M 0,20 L 10 0 54 3 60 20 z"/>
</svg>

Comments

[kn1ght_t]

Евгений, как всегда, великолепен)

[mrzgt]

спасибо большое, а вот при первом варианте вертикальные полоски от углов убрать нельзя?

[Евгений Петров]

mrzgt: Что за полоски?

[mrzgt]

s017.radikal.ru/i437/1506/b0/a1d5225e55fc.png
3 ваш вариант подошел,так что уже не важно. Спасибо

[Valery]

Чтобы в FF не было лесенок, можно прописать outline: 1px solid transparent для .menu-link:before

[Саша]

Valery: не помогает, все равно есть.

[Роман]

второй вариант в ФФ на убунте кстати выглядит получше первого (без полос)