Question

我需要创建一个透明箭头，如下面的脚本所示。

＆＃13;

.container{
  height:250px;
  background-image:url('https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg');
  position:relative;
  overflow:hidden;
}
.container:after{
  content:'';
  clear:both;
  display:block;
}
.left,
.right{
  width:50%;
  float:left;
  height:100%;
}
.right{
  background-color:#555;
}
.arrow1{
  width: 0;
  height: 0;
  border: 125px solid transparent;
  border-right: 50px solid #555;
  position: absolute;
  right: 50%;
  top: 50%;
}
.arrow2{
  width: 0;
  height: 0;
  border: 125px solid transparent;
  border-right: 50px solid #555;
  position: absolute;
  right: 50%;
  top: -50%;
}

＆＃13;

<div class="container">
  <div class="left"></div>
  <div class="arrow1"></div>
  <div class="arrow2"></div>
  <div class="right"></div>
</div>

＆＃13;

我得到了我想要的东西，但问题是我不知道<div class="container">在250px设置的高度，用于测试目的。 .arrow1的边框始终必须是.container高度的一半。但由于我不能在这里使用百分比值，所以我不知道如何看待。我认为最好的方法是使用svg的形状，但我没有任何矢量程序和我发现的在线解决方案不能正常工作。有没有人有另一种方式？

Answer 1

我注意到没有一个类具有不透明度。一般来说，当我使用CSS并且需要某些东西以某种方式透明时，我使用不透明度并且效果很好。

http://www.w3schools.com/css/css_image_transparency.asp

.right{
  background-color:#555;
  opacity: .5;  
}
.arrow1{
  opacity: .5;
  width: 0;
  height: 0;
  border: 125px solid transparent;
  border-right: 50px solid #555;
  position: absolute;
  right: 50%;
  top: 50%;
}
.arrow2{
  opacity: .5;  
  width: 0;
  height: 0;
  border: 125px solid transparent;
  border-right: 50px solid #555;
  position: absolute;
  right: 50%;
  top: -50%;
}

我确实看过这个codepen上的内容，应该有所帮助。

http://codepen.io/KDweber89/pen/RRObbm?editors=1100#0

创建一个透明箭头

1 个答案: