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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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