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

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

Добавлено через 00:53 сек.
Скриншот
Прикрепленные файлы:
screenshot-44-900.png (12.66Kb)
screenshot-44-900.png
0
2. Dmitry Kokorin 25.01.2018 / 01:09
Оранжевые штаны
®_GodZiIIa_€, если только при помощи дополнительных пустых блоков и их псевдоэлементов, больше я думаю никак, технологии пока не дошли
0
3. Lugaro 25.01.2018 / 01:33
ツ ツ ツ
Смурф на чистом CSS
https://youtu.be/oOWYN_-OPqA
CSS 3D Трансформации. Пример с 3D кубом
https://youtu.be/fmSIHr3WKxk?t=9m33s
0
4. Олег 25.01.2018 / 15:39
Последний из могикан
DimmoS, примерно так и думаю, возможно из нескольких дивов, собранных в один элемент,
но вот только как именно, пока не могу понять, с изгибами и закруглениями такой формы пока не могу разобраться.


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





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

Добавлено через 09:07 сек.
.::lugaro::., видео конечно интересное и даже полезное, но по моей теме, к сожалению, ничего )
Изменил: Олег (25.01.2018 / 15:41)
0
5. Олег 26.01.2018 / 16:57
Последний из могикан
Собрал некую конструкцию, что то близкое, но с бордер-радиус не выходит правильно изогнуть,
как то не очень сильно погружён в тонкости этого свойства, чтоб по наитию сделать.
Может кто сможет дать более близкие значения радиусов, чтоб изогнуть углы ближе к первому скриншоту.
Код напишу чуть далее, а сейчас скрин того, что получилось

Добавлено через 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);
}
Прикрепленные файлы:
screenshot-50-807.png (5.8Kb)
screenshot-50-807.png
0
6. Олег 27.01.2018 / 18:03
Последний из могикан
Пробовал просто трапецию приделывать, но углы у неё не смог нормально закруглить.
0
7. Олег 31.01.2018 / 10:27
Последний из могикан
Дизайнеры есть ? третий вариант и так же не то получается
Прикрепленные файлы:
screenshot-07-458.png (12.06Kb)
screenshot-07-458.png
0
8. ramzes 03.02.2018 / 16:39
2000 лет д.н.э.
извраты на css как мне помнится очень прилично жрут проц, лучше не злоупотреблять
0
9. Олег 03.02.2018 / 19:46
Последний из могикан
ramzes, смотря как извращаться )
Некоторые извраты полегче графики будут, несмотря на громоздкий код.
Мне бы хотелось достичь желаемого эффекта, но пока что не нашёл как.
Нужно изогнуть линии, как на первом скриншоте.
0
10. ramzes 03.02.2018 / 21:28
2000 лет д.н.э.
как не извращайся, картинка в данном случае уместнее.
та как ты делаешь у тебя не получится.
лень расписывать, по краям белые блоки с радиусом угла имитирующие выемки
Для выполнения действия необходимо авторизоваться!
Стикеры / Теги / Правила / Топ тем / Топ тем / Поиск