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

#html #css #css3

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

    

Ответы

Ответ 1

Получился такой вариант

Пример - черный фон



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;
}



Ответ 2

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


Подходит. У треугольников надо сделать прозрачный фон. При необходимости можно будет
использовать border-color. Хотя, есть подозрение, что просто прозрачного хватит.