图片周围的三角形

Question

是否有更简单的方法可以在图像周围制作IN CODE 三角形？

我做了this：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用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。

Answer 2

你可以添加一些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;
});