Как с помощью CSS сделать адаптивный блок в виде книги?

Question

[WebforSelf]

Есть такой блок, как сделать в форме книги?

Answer 1

[MamaLuyba]

как-то так: https://codepen.io/anon/pen/ROxzwy
ширину родителя для адаптивности только поправь.
ну и фон надо будет отразить с текстом.

Answer 2

[keeplod]

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

Comments

[WebforSelf]

мне казалось что изображения наоборт усложняют макет.

[Андрей Корехов]

Не усложняют. С картинкой получится всего 3 блока: обертка, левый с фото, правый с текстом.
Но для замены фото их надо будет всегда прогонять через фоторедактор что бы обрезать как нам надо => не жизнеспособно.

Answer 3

[profesor08]

.block {
    border: 2px solid red;
    border-radius: 100% 0 0 0;
    height: 30px;
    width: 100%;
}

Вот из таких скосов и делай.

Comments

[Андрей Корехов]

День добрый, получается что эти блоки надо наложить сверху на картинку что бы ее закрыть?

[profesor08]

Haotik, да