Рамка в стиле CATerpillar

254

03 июля 2017, 18:03

Какими средствами лучше всего сделать рамку, скажем к форме комментариев, как на присутствующем здесь изображении? Я понимаю что ее можно задать в бэкграунде, но пишу сюда потому как не исключаю что далеко не все знаю о возможностях таких свойств как border и outline. К тому же хотелось бы избежать лишних загрузок изображений на странице.

Answer 1

Вот нашел что-то в этом роде

* { 
  box-sizing: border-box; 
} 
 
.wrap { 
  height: 200px; 
  padding: 25px; 
} 
 
.gradient { 
  height: 150px; 
  width: 50%; 
  margin: 0 auto; 
  border: 10px solid transparent; 
  border-image: 10 repeating-linear-gradient(45deg, #FFCC00, #FFCC00 10px, #000000 10px, #000000 20px, #FFCC00 20px, #FFCC00 30px, #000000 30px, #000000 40px); 
}

<div class="wrap"> 
  <div class="gradient"></div> 
</div>

Answer 2

https://codepen.io/anon/pen/rwdrye

Картинку заменишь на свою

div { margin: 20px;   border-origin: content-box; float:left;} 
.stamp { 
  background-color: #ccc; 
  border: solid 9px transparent; 
  -webkit-border-image: url(https://i.stack.imgur.com/C4IV0.jpg)  9 / 9px / 12px round; 
   -moz-border-image: url(https://i.stack.imgur.com/C4IV0.jpg) 9 / 9px round; 
   -o-border-image: url(https://i.stack.imgur.com/C4IV0.jpg) 9  round; 
    border-image: url(https://i.stack.imgur.com/C4IV0.jpg) round 9 / 9px / 12px; 
  width: 158px; height: 88px; float:left; 
    }

<div class="stamp"></div>

<div class="stamp"></div>

Вариант без картинок

https://codepen.io/anon/pen/GExXEK

div { margin: 20px;   border-origin: content-box; float:left;} 
.stamp { 
  background-color: #ccc; 
  border: solid 9px transparent; 
  border-image: 10 repeating-linear-gradient(-45deg, #FFCC00, #FFCC00 10px,  
    #000000 10px, #000000 20px, #FFCC00 20px, #FFCC00 30px, #000000 30px,  
    #000000 40px); 
  width: 158px; height: 88px; float:left; 
    }