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

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

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

2. Dmitry Kokorin (25.01.2018 / 01:09)
®_GodZiIIa_€, если только при помощи дополнительных пустых блоков и их псевдоэлементов, больше я думаю никак, технологии пока не дошли

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

4. GodZiLLa (25.01.2018 / 15:39)
DimmoS, примерно так и думаю, возможно из нескольких дивов, собранных в один элемент,
но вот только как именно, пока не могу понять, с изгибами и закруглениями такой формы пока не могу разобраться.


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

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

5. GodZiLLa (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);
}

6. GodZiLLa (27.01.2018 / 18:03)
Пробовал просто трапецию приделывать, но углы у неё не смог нормально закруглить.

7. GodZiLLa (31.01.2018 / 10:27)
Дизайнеры есть ? третий вариант и так же не то получается

8. ramzes (03.02.2018 / 16:39)
извраты на css как мне помнится очень прилично жрут проц, лучше не злоупотреблять

9. GodZiLLa (03.02.2018 / 19:46)
ramzes, смотря как извращаться )
Некоторые извраты полегче графики будут, несмотря на громоздкий код.
Мне бы хотелось достичь желаемого эффекта, но пока что не нашёл как.
Нужно изогнуть линии, как на первом скриншоте.

10. ramzes (03.02.2018 / 21:28)
как не извращайся, картинка в данном случае уместнее.
та как ты делаешь у тебя не получится.
лень расписывать, по краям белые блоки с радиусом угла имитирующие выемки

11. GodZiLLa (04.02.2018 / 06:00)
Да я об этом тоже думал, пока не пробовал делать

12. spamVisavi (04.02.2018 / 18:01)
®_GodZiIIa_€, мне эта мысля первой в голову пришла.. больше вариантов не вижу

13. GodZiLLa (05.02.2018 / 14:21)
От картинок отказался по причине того, чтоб при изменении размера экрана стиль трансформировался, там всё почти в процентах, а с картинкой этого сложно добиться,
придётся лепить кучу картинок под разные разрешения.
А вставки из просто стилей, как здесь сделал, слева и справа, всё равно нужный изгиб не получается.
Например код левой вставки:

.hline1 {
display: inline;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  float: left;
  width: 3%;
  height: 34px;
  position: relative;
  margin: 14px 0 0;
  border: none;
  -webkit-border-radius: 0 48px 0 0 / 0 47px 0 0;
  border-radius: 0 48px 0 0 / 0 47px 0 0;
  background: rgb(255,255,255);
}

Как то с радиусами нужно решить. Вроде как можно отрицательные значения им задавать ?
Простым подбором на века засесть можно, а визуально в сервисах такого не наблюдал, чтоб можно было сделать.

14. GodZiLLa (05.02.2018 / 14:40)
Ещё наверное можно было бы вставку параллелограмма сделать, так угол более похож,
но у крайней стороны никак наверное угол 90 градусов не сделать.

.parallelogram {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  float: right;
  width: 150px;
  height: 100px;
  border: none;
  -webkit-border-radius: 27px 0 0;
  border-radius: 27px 0 0;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #1abc9c;
  -webkit-transform:   translateY(15px) skewX(-35deg);
  transform:   translateY(15px) skewX(-35deg);
}

URL: https://visavi.net/topics/43876