Как задать картинке или блоку рамку в виде треугольников? Вариант с border-image не подходит, т.к. нужно, чтобы была возможность поменять цвет этих треугольников.
2 ответа
Получился такой вариант
Пример - черный фон
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);
}
<div class="b-1"></div>
Пример - красный фон
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;
}
<div class="b-2"></div>
Вариант с border-image не подходит, т.к. нужно, чтобы была возможность поменять цвет этих треугольников.
Подходит. У треугольников надо сделать прозрачный фон. При необходимости можно будет использовать border-color. Хотя, есть подозрение, что просто прозрачного хватит.
-
Можете, пожалуйста, скинуть пример кода, когда рамка c треугольниками через border-image работает корректно? Не до конца понимаю, как это можно сделать через данное свойство, картинку треугольников добавил в вопрос– Леонид30 мар 2016 в 18:00
-
@Леонид, я что-то подумал, что картинка уже сама с треугольниками. Если нет, то надо подумать. Возможно, подойдёт svg с currentColor.– Qwertiy ♦30 мар 2016 в 18:01