css - 图片周围的三 Angular 形

有没有更简单的方法可以使图像周围的IN CODE三角形？

我做了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>

最佳答案

您可以使用border-image属性执行此操作，假设您不希望三角形透明地显示下面的内容。请记住，这是IE11+ only。

支持border masks is appearing，并允许您在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" />

到目前为止，浏览器对此的支持为realistically non-existent。