在背景图像上创建透明的CSS三角形

Question

我正在背景图像上创建一个分隔线，该背景图像的特征是一条中间有一个指针的线，表示在它下方。它只是一条线，所以分频器不牢固。当我制作分隔符时，父级的边框会穿过三角形，因为背景是透明的。

看看我想解释的内容：

我希望三角形在中间隐藏那条线。这就是我创建分隔符的方式：

<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%);
}

如您所见，父级包含背景图像。如果只是一种颜色，这将是非常简单的。

这是fiddle。

修改

解决！这是工作小提琴：http://jsfiddle.net/a9fkh0tp/1/

Answer 1

有可能，请参阅现场演示：http://jsfiddle.net/a9fkh0tp/1/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

想法是将单行划分为2个部分（左+右）。为此，请在<span>中添加<div>，以便<div class="splash-divider"><span></span></div>我们可以使用它进行更多操作。

Answer 2

你也可以使用伪元素的方法。

＆＃13;

＆＃13;

.divider {
  padding:1em;
  transform:rotate(45deg);
  width:0;
  margin:auto;
  border:2px white solid;
  border-top:none;
  border-left:none;
  position:relative;
  box-shadow:1px 1px 1px white;
}
.divider:before, div:after {
 content:'';
  width:2000px;
  border-bottom:2px solid white;
  position:absolute;


}
.divider:before {
  transform-origin:top left;
  bottom:1.9em;
  left:2em;  
  transform:rotate(-45deg);  
  box-shadow:1px 1px 1px white;
}
.divider:after {
  transform-origin:top left;
  left:0.05em;
  top:2.1em;
  transform:rotate(135deg);
  box-shadow:1px -1px 1px white;
}
html {
min-height:100%;
  background:gray;
background:linear-gradient(to bottom left, gray, yellow,purple, gray, yellow,purple, gray, yellow,purple);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以在http://codepen.io/gc-nomade/pen/raYGyO中添加...添加半径，变换，等等：）

Answer 3

<强> HTML：

<div class="line-separator">
    <div class="side-line"> </div>
    <div class="triangle"> </div>
    <div class="side-line"> </div>
</div>

<强> CSS：

.side-line {
    display: inline-block;
    border-top: 1px solid black;
    width: 20%;
}

.triangle {
    display: inline-block;
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    transform-origin: center center;
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin: 0 -3px -3px;
}

现场演示 http://jsfiddle.net/85saaphw/

如果您希望三角形倒置，只需将变换：rotate（45deg） arg更改为225deg。