Наклон одной стороны блока css3 сделать как мне?

Question

[Nik Gubin]

Доброй ночи! Очень глупый вопрос, да, но т.к. с такими вещами не работал, не могу представить, как эта магия создаётся. Буду рад познать!

Есть два блока, нужно чтобы они выглядели так, как на скриншоте. Варианты с border не подходят, т.к. там должен разместиться комфортно контент. Можно конечно нарезать в фотошопе фон, но к этому я прибегну, если не получится с css.



Где-то видел, но никак не могу упомнить ((

Answer 1

[Danila]

codepen.io/DNLHC/pen/WxrLOM

upd
в случае с полупрозрачным фоном смотрите в сторону линейных градиентов
codepen.io/DNLHC/pen/mEVagB

Comments

[Алексей]

FireFox - joxi.ru/zAN5lLbUl7xy32.png

[Danila]

Алексей: странно, у меня в фф всё норм
i.imgur.com/EdaxSWs.jpg
в любом случае это набросок, думаю принцип ясен

[Алексей]

Данила: Пардон, у меня сбился Zoom на +1. На остальных зумах проблем нет.

[Nik Gubin]

Не совсем то, ибо фон у них полупрозрачный, но вы натолкнули меня на мысль! Завтра пришлю готовый пример, если кому интересно) благодарю за учатие!

[Nik Gubin]

Два крутых примера, новенькое для меня в мире css3 :-) Благодарю. Но всё-таки у меня идея с первым вариантом, немного по другому, но костяк ваш! Благодарю ещё раз, выручили. Про transform: skew гугл мне подсказывал, но видимо усталость дала о себе знать.

[Danila]

gubin_niko: если честно не представляю как со skew можно добиться корректной полупрозрачности, ведь он предполагает работу со слоями, буду рад увидеть ваш результат

[Nik Gubin]

Данила: Уже готово) Там, правда, больше блоков понадобилось, но главное, что результат такой, какой нужен, и плюс анимация будет работать. Позвольте, опубликую чуть позже, сейчас нет возможности.

Answer 2

[Антон Федорян]

Был похожий вопрос

Comments

[Nik Gubin]

Я же писал, что с border вариант не подходит.

Answer 3

[HamSter]

пример