Как реализовать такую штуку?

Question

[Юрий Кучеренко]

Собственно вопрос в заголовке, в нижней части секций есть такая треуголка со стрелкой, можно просто блоком и position: absolute сделать ее внизу. Но загвоздка состоит в том что эта треуголка как бы прозрачная и имеет под собой продолжение бэкграунда основного блока. Как это сделать?



И второе это кнопка "play" по сути такая же проблема, бордер основного блока не ложится на саму иконку, и я такое делал с блоком где иконка "play" или другая имеет белый фон, тогда она просто закрывает бордер как слоем. Но тут опять таки прозрачный бэк. Заранее спасибо кто откликнется

Answer 1

[Иван]

И то и то верстать по частям псевдо-элементами, пример тут.
Пример стилей для первой задачи:

section {
    position: relative;
}

section::after {
    background: url(bla.png) center bottom;
    botton: 0;
    height: NNpx;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
}

Серый фон - прозрачный:

Рамку я разбил бы на такие части:

В ненужных местах убираются бордеры и бордер-радиусы.

Comments

[Юрий Кучеренко]

разбивать рамку на части это вообще порнография, а вот на счет первого варинта не совсем понял, как ее спозиционировать то я знаю, вся заморочка что там фон под этой треуголкой а афтер с абсолютом не будет влиять на высоту блока на котором основной bg, если не прав накидай какую то заготовку на кодпене с фоном. Может я не въезжаю

[Иван]

Разбивать рамку на части это абсолютно единственный рабочий способ сверстать точь в точь как на картинке. Пример с фоном: codepen.io/podorozhny/pen/dMeGrv

[Юрий Кучеренко]

Иван: ааа, теперь понял что ты имел в виду, спасибо за подмогу. Но с рамкой конечно дикий изврат, буду думать еще

Answer 2

[kn1ght_t]

https://jsfiddle.net/sqojgk46/

Comments

[Юрий Кучеренко]

Спасибо большое, жесть конечно)

Answer 3

[Алексей Струков]

Есть способ, но треуголка будет с прямым углом
https://jsfiddle.net/b5sxLLwa/
Думаю все эти вещи лучше реализовывать с картинками, если надо прям именно так сделать обязательно.
Создаете картинку с прозрачным фоном на которой нарисован этот кружок PLAY внутри рваного бордера и сконвертировав ее в base64 накладываете через background-image в тот блок с текстом. И аналогично с треуголкой.
Откуда вообще этот дизайн взялся?
Это макет или есть живой сайт такой?
Если макет, то надо у дизайнера узнать, как он ожидал что это будут переносить в верстку, когда рисовал свой изврат)

Comments

[Юрий Кучеренко]

Дизайн такой, ну что дали то дали. Есть легкие задачи, есть трудные)

[Иван]

Никакого изврата там нет, все очень просто и кроссбраузерно верстается.

[Алексей Струков]

Юрий Кучеренко: а есть связь с дизайнером?

[Юрий Кучеренко]

Алексей Струков: есть связь с ПМ, но смысла особого нету потому что если это заказчик увидел то теперь будет хотеть и ныть

[Алексей Струков]

Юрий Кучеренко: а макет сам в каком виде?
там есть слои или просто нарисовано все одной большой картинкой?

[Юрий Кучеренко]

Алексей Струков: да и шаришь в том дело что 90% не секут ничего в коде (по идее конечно и не должен) и лепят без мысли о том как это переносить в код и какими костылями, а заказчику вообще по барабану, он хочет что бы все было как в макете, зато потом он к тебе прибежит что где-то что-то отвалилось, на что я говорю - "I told u so" от англ. Я же говорил!

[Алексей Струков]

Юрий Кучеренко: почему не должен?
когда архитектор создает проект он прописывает все нюансы, как это надо реализовывать. Какими болтами крепить детали, какой раствор использовать и т.п., а не просто рисует в автокаде картинку дома и отдает строителям.

[Юрий Кучеренко]

Алексей Струков: ну если бы дизайнеры так шарили то кодеры бы вымерли)

[Юрий Кучеренко]

Алексей Струков: честно сказать еще не знаю, мне пока выкатили жпег псдшника

[Юрий Кучеренко]

Алексей Струков: по кнопке плей постараюсь подвинуть заказчика а если нет то бахну картинкой, а то 2 часа ковырять бордеры и адаптивить это все ну его..) как говорить "подумай не х*^ню ли ты делаешь" тем более что юзер плевать хотел как ты там это сделал

[Алексей Струков]

Юрий Кучеренко: ну в будущем думаю верстальщик и дизайнер это будет один человек )
Если пока только жпег то надо подождать полноценный макет, может там даже есть руководство по стилю к нему какое то.
Кнопку плэй точно надо делать картинкой, точнее иконкой или svg. Сделать средствами css эту кнопку будет очень проблематично, а может даже и невозможно.

[Алексей Струков]

Иван: под извратом имел ввиду то, что никаких пояснений к дизайну не предоставлено. Тот рваный бордер это картинка или css border? Если картинка, то ее надо было передать, а не просто отдавать жпег файл без слоев )

[Иван]

Алексей Струков: тут никаких объяснений от дизайнера и не нужно, имхо. Макет в джипеге - другое дело, зашквар конечно же полный.

[Юрий Кучеренко]

Иван: Да это пока дали в жпеге на "посмотреть"

[Юрий Кучеренко]

Алексей Струков: Гляди чувак выше сделал этот бордер адский с псевдоблоками которые бордеры имеют https://jsfiddle.net/sqojgk46/

[Алексей Струков]

Юрий Кучеренко: у меня была мысль сделать типа такого, но не сообразил сразу как нижний бордер порвать красиво)

[Алексей Струков]

Юрий Кучеренко: вот моя немного оптимизированная версия если вдруг пригодится https://jsfiddle.net/sqojgk46/1/

[Юрий Кучеренко]

Алексей Струков: спасибо)