Сложные фигуры в css3

Печать / RSS
58


Последний из могикан
0
В общем то не очень надеюсь здесь найти ответ, поскольку не уверен в наличии в этом форуме мастеров по css,
хотя кто знает, может кто и в курсе.
Вопрос в следующем, возможно ли выстроить такую сложную фигуру, как на скриншоте,
с использованием только css3, без использования графики ?
Вопрос только именно в геометрии фигуры, так как градиент, тиснение и тень сделать не сложно.
Вот сама картинка, такую фигурку нужно слепить в css

Добавлено через 00:53 сек.
Скриншот
Прикрепленные файлы:

Оранжевые штаны
0
®_GodZiIIa_€, если только при помощи дополнительных пустых блоков и их псевдоэлементов, больше я думаю никак, технологии пока не дошли

ツ ツ ツ
0
Смурф на чистом CSS
https://youtu.be/oOWYN_-OPqA
CSS 3D Трансформации. Пример с 3D кубом
https://youtu.be/fmSIHr3WKxk?t=9m33s

Последний из могикан
0
DimmoS, примерно так и думаю, возможно из нескольких дивов, собранных в один элемент,
но вот только как именно, пока не могу понять, с изгибами и закруглениями такой формы пока не могу разобраться.


.::lugaro::., сейчас попробую эти видео вставить и посмотреть.


ЗЫ.
Вантуз так и не реализовал нормальную вставку с ютуба, как уже везде сделано )

Добавлено через 09:07 сек.
.::lugaro::., видео конечно интересное и даже полезное, но по моей теме, к сожалению, ничего )
Изменил: Олег (25.01.2018 / 15:41)

Последний из могикан
0
Собрал некую конструкцию, что то близкое, но с бордер-радиус не выходит правильно изогнуть,
как то не очень сильно погружён в тонкости этого свойства, чтоб по наитию сделать.
Может кто сможет дать более близкие значения радиусов, чтоб изогнуть углы ближе к первому скриншоту.
Код напишу чуть далее, а сейчас скрин того, что получилось

Добавлено через 01:37 сек.
Использовал такую конструкцию :

HTML
<div class="header">
<div class="hline1"></div>
<div class="hline2"></div>
<div class="hline3"></div>
</div>

CSS
.hline1 {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 10px;
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(52, 152, 219, 0.5);
}
.hline2 {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 90%;
height: 17px;
position: absolute;
right: 5%;
left: 5%;
margin: 0 auto;
border: none;
-webkit-border-radius: 0 0 34px 34px / 0 0 31px 31px;
border-radius: 0 0 34px 34px / 0 0 31px 31px;
font: normal 16px/1 "Times New Roman", Times, serif;
color: black;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(52, 152, 219, 0.5);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
.hline3 {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 88%;
height: 50px;
position: absolute;
right: 6%;
left: 6%;
margin: 17px auto 0;
border: none;
-webkit-border-radius: 0 0 66px 66px / 0 0 75px 75px;
border-radius: 0 0 66px 66px / 0 0 75px 75px;
font: normal 16px/1 "Times New Roman", Times, serif;
color: black;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(52, 152, 219, 0.5);
}
Прикрепленные файлы:

Последний из могикан
0
Пробовал просто трапецию приделывать, но углы у неё не смог нормально закруглить.

Последний из могикан
0
Дизайнеры есть ? третий вариант и так же не то получается
Прикрепленные файлы:

2000 лет д.н.э.
0
извраты на css как мне помнится очень прилично жрут проц, лучше не злоупотреблять

Последний из могикан
0
ramzes, смотря как извращаться )
Некоторые извраты полегче графики будут, несмотря на громоздкий код.
Мне бы хотелось достичь желаемого эффекта, но пока что не нашёл как.
Нужно изогнуть линии, как на первом скриншоте.

2000 лет д.н.э.
0
как не извращайся, картинка в данном случае уместнее.
та как ты делаешь у тебя не получится.
лень расписывать, по краям белые блоки с радиусом угла имитирующие выемки
Для выполнения действия необходимо авторизоваться!
Стикеры / Теги / Правила / Топ тем / Топ тем / Поиск