davidxd33 davidxd33 - 7 months ago 14
HTML Question

Creating a transparent CSS triangle over a background image

I'm making a divider over a background image that features a line with a pointer in the middle signifying to look below it. It's all just one line so the divider is not solid. When I made my divider the border of the parent goes through the triangle because the background is transparent.

Just take a look at what I'm trying to explain:

enter image description here

I would like the triangle to hide that line in the middle. This is how I create the divider:

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


As you can see, the parent contains a background image. This would be super simple if it was just a color.

Here's the fiddle.

Edit



Resolved! Here's the working fiddle: http://jsfiddle.net/a9fkh0tp/1/

Answer

It is possible, see live demo: 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>

The idea is to divide the single line to 2 parts (left + right). In order to do that, add a <span> into the <div>, so <div class="splash-divider"><span></span></div> we can then play more with it.

Comments