Мануал по созданию разных объектов в css?

Question

[Алексей Пархоменко]

Уважаемые знатоки, помогите, пожалуйста сверстать вот такую вот форму:
Спасибо

Comments

[OVK2015]

www.webmasters.by/articles/html-coding/3198-create...

Answer 1

[Maxim Zhgulev]

Безкостыльный метод (всё тянется в зависимости от количества текста):
https://jsfiddle.net/hydsqyc4/1/

Comments

[tigra]

ну это в общем то реализовн первый описанный мною метод, с псевдоэлементами)

[Maxim Zhgulev]

tigra: Просто у вас там полемика пошла в комментариях. Вы писали про какие-то извращения. Я не вижу ничего "извращенского" в абсолютном позиционировании и псевдоэлементах. Это абсолютно нормальная практика, а вот использовать изображения для верстки таких вещей в 2016 году - уже безоговорочный костыль.

Answer 2

[Дмитрий Приходченко]

.a{ 
    width: 300px;
    height: 200px;
    background: red;
    border-radius: 40px 200px 40px 70px;
}

Открой инструмент откладки html и балуйся с параметрами закругления. Параметры задаются по часовой стрелку от левого верхнего.

Answer 3

[tigra]

простых способов, сделать такие объекты css-ом, нет. Нужно извращаться цепляя к блокам псевдоэлементы и ещё извращаться над ними, абсолютно их позиционируя.
Как один из вариантов, взять один блок(левый) картинкой, сделать из него правый, отразив его по горизонтали и увеличив. Нижний блок сделать прямоугольником нужного цвета и прицепить псевдоэлементами слева и справа наш блок(картинку).
Итого: будет подгружаться 1 картинка, а использоваться аж 4 раза
P.S. я бы на твоём месте запилил все 3 блока картинками и не махал себе мозги, цвет всего 1 и 1 картинка будет весить 2-3кб.

Comments

[Дмитрий Приходченко]

Эм... зачем вы вводите в заблуждение? это обычный border-radius.

[tigra]

Дмитрий Приходченко: ок, отрисуйте мне пожалуйста 3 указанные выше фигуры одними border-radius

[Алексей Пархоменко]

Дмитрий Приходченко: tigra: Проблема в том, что сайт будет адаптивным, если использовать картинку, то не избежать очень кропотливой работы. Вариант с бордерами думаю сойдет.

[tigra]

Алексей Пархоменко: я ответил опираясь на ваш макет, чтобы сделать в точности как указано, одних border-radius недостаточно, ибо там трапеция с закруглёнными углами, а не просто углы, а так конечно, если сделать что то похожее на глаз, то, "Вариант с бордерами думаю сойдет"

[Алексей Пархоменко]

tigra: Согласен, спасибо Вам за совет.!

[Дмитрий Приходченко]

tigra: посмотрите мой ответ к данному вопросу, я думаю мой вариант намного практичнее чем ваш

[Maxim Zhgulev]

Дмитрий Приходченко: tigra: https://jsfiddle.net/hydsqyc4/1/

[tigra]

Дмитрий Приходченко: ваш вариант не реализует блоков указанных на макете, на глаз можно всё что угодно начудить, а если задача, сделать точно по макету как вы будете делать??

[Алексей Пархоменко]

e_s_l: Вы очень помогли, сам бы никогда не додумался. Спасибо Вам за помощь!