Как верстать блоки сложной формы на чистом css?

Question

[desrt]

Добрый день!

Появился вопрос, как верстать сложный блок именно на css. Что я имею ввиду под сложным блоком, выделено красным на скрине - тут.
Оригинал скрина - тут

Всем спасибо заранее за любые ответы.

Comments

[Андрей Козлов]

А можно ссылку на сайт?)

[desrt]

Андрей Козлов: Ссылка на макет - luiszuno.com/blog/downloads/fox-all-psd-layouts

[Moe Green]

тоже хочу! сильно понравился. но как его там скачивать? вы не можете поделиться им - ведь все равно уже скачали?

Answer 1

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

Пример
Используем псевдоэлементы и трансформацию.
Простые углы реализуем за счёт рамки. Однако, если потребуется тень, придётся и там применить трансформацию.
Для сложных углов вводим вложенный элемент и используем внутреннюю тень.
И, конечно же, всегда есть вариант с использованием SVG в качестве фона (или напрямую).

Comments

[Думай Головой]

Браво!

[desrt]

Вау! Спасибо огромное)

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

Владислав Турчинский: Вы молоды и талантливы. Вам незачем волноваться:)

[xmoonlight]

The BEST!

[Moe Green]

да, просто отлично! )

[bl1nder]

Очень. Спасибо за пример.

Answer 2

[Думай Головой]

углы делаются с помощью псевдоэлементов - after, before

ссылка на генератор углов: apps.eky.hk/css-triangle-generator

Comments

[desrt]

А как сделать border(светлая обводка) внутри меню? Или придется сначало делать border-top/bottom потом создавать по два треугольника(на краях блока с меню) с цветом обводки, потом на эти треугольники налаживать еще треугольники но со цветом бекграунда меню, чтобы было видно только цвет обводки?

[desrt]

desrt: Хотя там не получится так сделать:(

[Думай Головой]

там лучше картинкой

[desrt]

Vyad: ну а если такой случай что картинкой лучше не делать ибо нужно под ретину адаптацию. Просто сделать несколько картинок углов и медиа-выражениями подменять их, в зависимости от плотности пикселей?

[Думай Головой]

desrt под ретину должна быть svg графика, плюс если нужны старые браузеры пишется так:
.block {
backround: img.png - ie8-
backround: img.svg
}

[step2n]

Либо еще одну обёртки добавить, либо, как уже сказали, SVG для фона