Как сверстать такую штуку?

Question

[Дмитрий Смирнов]

Друзья, подскажите, пожалуйста, как сверстать подобное?
вот такая штука между секциями (сверху секция с белым фоном, снизу - с темным).
joxi.ru/v29Px9Ns3Ogybm

Answer 1

[Сергей delphinpro]

Answer 2

[Роман]

Вариантов тьма. Вы хоть какой-нибудь пробовали? И вообще, в чём заключается сложность? С этой сиське белой? Если так то блоками relative и внутри absolute и картинку тупо по центру и margin-top: -20px
Что-то типа того. Можно и полностью css, но стоит ли того?

Comments

[Дмитрий Смирнов]

Что-то не подумал картинкой сделать, думал нужно на css

[Роман]

Поверьте моему опыту, вырежьте картинку и сохраните её в .png Отцентруйте и сдвиньте вверх. И будет у вас всё прекрасно. А все эти извращения с CSS - это перед девчонками понтануться :-) Подумайте о mobile-first и прочих адаптивностях.

Answer 3

[dicem]

<div class="white">
</div>
<div class="black">
<span>Simple Text</span>
</div>

.white{
background: white;
}
.black{
background: url(../simplehuinya.png), black;
background-position: top center, 100% 100%;
background-repeat: no-repeat;
background-size: 10%, 100%;
}

Ну вроде как то так, где simplehuinya.png это изображение вот это

Comments

[Анатолий тнк]

самый простой вариант

Answer 4

[Ivan Bogachev]

Посмотрите вот эту штуковину. Она наведет вас на нужные мысли.

Comments

[Саша]

Ivan Bogachev что то не работает)

[Ivan Bogachev]

Саша: а вы скроллируйте помедленнее - заметите, что там происходит.

[Сергей Горячев]

Ivan Bogachev: А там что-то происходит? Не вижу никакого супер эффекта или еще чего-то)))

[Ivan Bogachev]

Sergey Goryachev: тоже не сразу заметил, там происходит эффект "липкого" круга (не знаю как по русски называется gooey effect). Как раз для таких капелек в самый раз получается:

[Сергей Горячев]

Ivan Bogachev: Вот даже после просмотра скриншотов, не увидел эффекта. На Linux Mint в Firefox это не работает :)

[Ivan Bogachev]

Sergey Goryachev: Упс.... и правда в FF не работает.. Видимо мне надо лучше чужие демки проверять :)

[Ivan Bogachev]

К счастью автору вопроса не нужен position: fixed, так что его эта проблема не коснется

Answer 5

[anamorph]

https://jsfiddle.net/sdn5g749/
как то так
только размерами придется чуть попариться

Answer 6

[Сергей Горячев]

Самая простая хрень.
https://jsfiddle.net/webirus/e9a6h1af/
Блок и псевдоэлемент в виде соска белого.
Сосок можно картинкой, а можно на css, но геморойно.
Лучше на SVG эту хрень сделать.

Comments

[Дмитрий Смирнов]

спасибо, почему-то не подумал в сторону картинки) думал только про css.

[Сергей Горячев]

Дмитрий Смирнов: Да можно на CSS, правда гемора много будет. Примерно правильную мысль подсказал anamorph , но допиливать нужно много еще. Поэтому карттинкой, а лучше вообще BASE64, вообще без проблем будет.