Простой способ сделать блок с кривой линией?

Question

[shane89]

Answer 1

[Дмитрий]

Я делал таким вот способом:
Родителю {
transform: skewX(*deg); }
Сыну {
transform: skewX(-*deg); }

Только вот не скажу что у всех браузеров хорошее сглаживание, потому края выглядят далеко от идеала.

Comments

[shane89]

не то, еще есть варианты?

[Дмитрий]

shane89: Простых способов больше нет.
Проще только фоновую картинку взять.
Да и в принципе сложных способов то для этой задачи не особо много.

Answer 2

[Ксения Михайлова]

А чем вас настолько не устраивает skew?
Можно нарисовать svg. Будет весьма растягиваемо и не мыльно.

Можно исхитриться нарисовать треугольники border'ом у before/after-элементов, но настолько узкого контентного блока у вас не получится.

Comments

[shane89]

svg это уже интересней. Я только изучаю. Ксения не могли дать пример, как можно рисовать треугольник, на всю ширину монитора.

[Ксения Михайлова]

Вот здесь меню оформлено в помощью svg kitchenstore.com.ru

Answer 3

[Михаил Чирский]

css3clickchart.com/#skew-transform

Comments

[shane89]

не то, есть еще способы?

[Михаил Чирский]

shane89: Смотря какая задача, и на сколько она приоритетна, т.к на картинке, вы на CSS не сделаете, т.к сглаживания идеального не будет