Как добавить треугольную границу в css?

Question

[Joulence]

Начал учиться вёрстке и при работе с первым макетом возникла проблема

Как сделать треугольную границу под фоновым изображением с айфоном? Можно ли сделать это с помощью "border"?

Comments

[Rustam Bainazarov]

Где граница? Какая граница? Вижу только белое пустое пространство под блоком.

https://hsto.org/webt/5d/43/1d/5d431d64805bc913865...

[Brad9aga]

Рустам Байназаров, что он курит, вот в чем вопрос

[Rustam Bainazarov]

Brad9aga, возможно, у него неправильно картинка прогрузилась. Ждём комментария автора.

[ProjectSoft]

Ребят, всё очень просто. Псевдоелементы с левым/правым бордером, позиция, + проценты + фон родителя. Стандартная фишка от дизайнеров.)))
Картинка, конечно, подробная не мешала бы.

[Brad9aga]

ProjectSoft, ты сам представляешь себе это порно ?

[ProjectSoft]

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

[Brad9aga]

ProjectSoft, я умываю руки

[Joulence]

Рустам Байназаров,

я имел в виду такую треугольную границу. Опыта нихрена нету, так что надеюсь на вашу помочь

[Joulence]

Brad9aga, как полгода ничего

[Brad9aga]

Joulence, тьфу ты, вот это дичь

[Joulence]

Brad9aga, так как мне решить эту проблему или чисто забить :)?

[Михаил]

Joulence, svg треугольник, повторённый на фоне

[Rustam Bainazarov]

Joulence, безопасный метод — картинкой на фон (SVG). Картинка очень маленькая (115 байт), поэтому я её в base64 закодировал прямо в CSS:


Более продвинутые методы — через clip-path (если нужна именно обрезка) или с помощью градиента, чтобы быть типа крутым.

[Joulence]

Рустам Байназаров, спасибо, вот это прям в точку

[Brad9aga]

ProjectSoft, тут есть более порнографическое дело , картинка не интересно, а вот clip-path сижу просто в ауте чешу репу)

[Brad9aga]

Рустам Байназаров, та я шатал этот clip path

[Rustam Bainazarov]

Brad9aga, вот тут пример с clip-path:
https://stackoverflow.com/questions/13774952/makin...

Это один из вариантов с ним.

Там же есть и с градиентом пример, кстати.

[Brad9aga]

Рустам Байназаров, ты мне другое скажи лучше откуда эти точки полигона берутся

[Rustam Bainazarov]

Brad9aga, полный размер родительского блока — это от 0% до 100% по обеим осям. Ставишь в них точки с координатами X и Y друг за другом, создавая область обрезки.

Потренируйся тут, в визуальном редакторе:
https://bennettfeely.com/clippy/

[Brad9aga]

Рустам Байназаров, ссылка нерабочая

[Rustam Bainazarov]

Brad9aga, рабочая, нужно через VPN заходить, если ты из России:

[Brad9aga]

Рустам Байназаров, этот я видел

[Rustam Bainazarov]

Brad9aga, и в чём же вопрос?

Выбирай режим custom-shape — раставляй точки, двигай их, тренируйся, потом придёт понимание, ведь там всё просто.

Помимо процентов и пикселей можно координату ставить с помощью calc() типа так: calc(30%- 30px), чтобы задать более сложное и точное значение.

[Brad9aga]

Рустам Байназаров, короч у меня перегрев, надо отдохнуть,завтра переварю, спасибо

[ProjectSoft]

Joulence, всё ещё проще - двойной фон без использования псевдоэлементов.

Answer 1

[Денис Т]

Вырезаешь белые треугольники.
Контейнеру где лежит фото задаешь position: relative;
Создаешь для него псевдоэлемент :after с такими свойствами

.name-class:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10px; /*Подбери на глаз*/
background-image: url(); /*Сюда пиши путь до картинки с треугольниками*/
}

Comments

[Joulence]

Есть такой контакт, спасибо

Answer 2

[DM25AN]

Clip-path и не нужно выдумывать с лишними изображениями