Как задать картинке или блоку рамку в виде треугольников? Вариант с 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; }
Комментариев нет:
Отправить комментарий