Страницы

Поиск по вопросам

среда, 5 декабря 2018 г.

Задание border в виде треугольников в CSS

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


Ответ

Получился такой вариант
Пример - черный фон
body{ background: #000; } .b-1 { position: relative; margin: 15px; width: 400px; height: 200px; background: url(https://i.ytimg.com/vi/qW3WioRxMhU/maxresdefault.jpg) no-repeat center top; background-size: cover; } .b-1:before, .b-1:after{ content: ''; position: absolute; left: 0; width: 100%; height: 10px; z-index: 1; background-size: 15px 15px; background-repeat: repeat-x; height: 15px; } .b-1:before { top: 0; background-image: linear-gradient(40deg, transparent 10px, #000 11px), linear-gradient(320deg, transparent 10px, #000 11px); } .b-1:after{ bottom: 0; background-image: linear-gradient(320deg, #000 10px, transparent 11px), linear-gradient(40deg, #000 10px, transparent 11px); }


Пример - красный фон
body{ background: #f00; } .b-2 { position: relative; margin: 15px; width: 400px; height: 200px; background: url(https://i.ytimg.com/vi/qW3WioRxMhU/maxresdefault.jpg) no-repeat center top; background-size: cover; } .b-2:before, .b-2:after{ content: ''; position: absolute; left: 0; width: 100%; height: 10px; z-index: 1; background-size: 15px 15px; background-repeat: repeat-x; height: 15px; } .b-2:before { top: 0; background-image: linear-gradient(40deg, transparent 10px, #f00 11px), linear-gradient(320deg, transparent 10px, #f00 11px); } .b-2:after{ bottom: 0; width: 100%; height: 15px; background-image: linear-gradient(320deg, #f00 10px, transparent 11px), linear-gradient(40deg, #f00 10px, transparent 11px); background-size: 15px 15px; background-repeat: repeat-x; height: 15px; }

Комментариев нет:

Отправить комментарий