Triangles around picture

Question

Is there any easier way to make IN CODE triangles around an image?

I made this:

.wrapper {
  padding: 50px 0px;
  height: 50px;
  position: relative;
  width: 300px;
  background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg");
}
.triangle {
  border-bottom: 10px solid #eee;
  width: 0px;
  position: absolute;
  bottom: 0;
}
.right {
  border-left: 10px solid transparent;
}
.left {
  border-right: 10px solid transparent;
  left: 10px;
}
.right1 {
  border-left: 10px solid transparent;
  left: 20px;
}
.left1 {
  border-right: 10px solid transparent;
  left: 30px;
}
.right2 {
  border-left: 10px solid transparent;
  left: 40px;
}
.left2 {
  border-right: 10px solid transparent;
  left: 50px;
}

<div class="wrapper">
  <div class="left triangle"></div>
  <div class="right triangle"></div>
  <div class="left1 triangle"></div>
  <div class="right1 triangle"></div>
  <div class="left2 triangle"></div>
  <div class="right2 triangle"></div>
  <!-- And more...-->
</div>

Answer 1

You could add some Javascript

x=0;
$('.triangle').each(function(){
$( this ).addClass('left');
$( this ).addClass('right');
$( this ).css( "left", x );
x=x+20;
});

.wrapper {
  padding:50px 0px;
  height: 50px;
  position: relative;
  width:300px;
  background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg");
}

.triangle {
  border-bottom: 10px solid #eee;
  width: 0px;
  position: absolute;
  bottom: 0;
}

.right {
  border-left: 10px solid transparent;
}

.left {
  border-right: 10px solid transparent;
  left: 10px;
}

.right1 {
  border-left: 10px solid transparent;
  left: 20px;
}

.left1 {
  border-right: 10px solid transparent;
  left: 30px;
}

.right2 {
  border-left: 10px solid transparent;
  left: 40px;
}

.left2 {
  border-right: 10px solid transparent;
  left: 50px;
}

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="wrapper">
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>      
   <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <div class=" triangle"></div>
  <!-- And more...-->
</div>

$('.triangle').each(function(){
$( this ).addClass('left');
$( this ).addClass('right');
$( this ).css( "left", x );
x=x+10;
});

Answer 2

You can do this with the border-image property, assuming you don't want the triangles to transparently reveal the content underneath. Do keep in mind that this is IE11+ only.

Support for border masks is appearing, and allows you to do this with transparency in Chrome:

.svg-border-mask {
  -webkit-mask-box-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg) 30 repeat;
  mask-border: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg) 30 repeat;
}
img {
  width: 284px;
  margin: 40px;
}

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="svg-border-mask" />

Browser support for this is however realistically non-existent so far.