css - 图片周围有三 Angular 形

Question

有没有更简单的方法可以在代码中在图像周围制作三 Angular 形？

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

您可以使用 border-image 来执行此操作属性，假设您不希望三 Angular 形透明地显示下面的内容。请记住，这是 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到目前为止。