html - 在背景图像上创建透明的 CSS 三 Angular 形

Question

我正在背景图像上制作一个分隔线，其中有一条线，中间有一个指针，表示要在其下方查看。这只是一根线，所以分隔线不是实心的。当我制作分隔线时，父级的边框穿过三 Angular 形，因为背景是透明的。

看看我想解释的内容:

我希望三 Angular 形隐藏中间的那条线。这就是我创建分隔线的方式:

<div class="splash">
    <div class="splash-divider">
    </div>
</div>

---

.splash {
    background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
    height: 200px;

}

.splash-divider {
    position: relative;
    margin: 20px auto 0 auto;
    width: 50%;
    height: 30px;
    border-bottom: 1px solid #ffffff;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}

.splash-divider:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 30px;
    height: 30px;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
    transform: rotate(-45deg) translate(-50%, -50%);
    -webkit-transform: rotate(-45deg) translate(-50%, -50%);
    -ms-transform: rotate(-45deg) translate(-50%, -50%);
    -moz-transform: rotate(-45deg) translate(-50%, -50%);
    -o-transform: rotate(-45deg) translate(-50%, -50%);
}

如您所见，父级包含背景图像。如果它只是一种颜色，那就 super 简单了。

这是fiddle .

编辑

解决了!这是工作 fiddle :http://jsfiddle.net/a9fkh0tp/1/

Answer 1

这是可能的，请参阅现场演示:http://jsfiddle.net/a9fkh0tp/1/

.splash {
  background: url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
  height: 200px;
}
.splash-divider {
  position: relative;
  margin: 20px auto 0 auto;
  width: 50%;
  height: 30px;
  border-bottom: 1px solid transparent;
}
.splash-divider:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 30px;
  height: 30px;
  border-left: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15);
  transform: rotate(-45deg) translate(-50%, -50%);
}
.splash-divider span:before,
.splash-divider span:after {
  position: absolute;
  top: 0;
  display: inline-block;
  content: "";
  width: 50%;
  height: 30px;
  border-bottom: 1px solid #fff;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.splash-divider span:before {
  left: -28px;
}
.splash-divider span:after {
  right: -16px;
}

<div class="splash">
  <div class="splash-divider"><span></span></div>
</div>

这个想法是将单行分成两部分(左+右)。为此，请添加 <span>进入<div> ，所以<div class="splash-divider"><span></span></div>然后我们可以用它玩更多。