Creating a transparent CSS triangle over a background image

Question

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/

You are not going to be able to cover up the white boarder line (at least not so that it looks nice) because you are using a background image and covering up the line to make look like the background would be close to impossible. you need to restructure what your are doing altogether or just do what @sev suggested. — crazymatt, Feb 06 '15 at 23:00
Looks similar to http://stackoverflow.com/questions/27462276/border-on-a-div-with-centred-arrow-using-css/27721545#27721545 — Harry, Feb 07 '15 at 08:15

Stickers · Accepted Answer · 2016-04-23T13:45:51.400

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.

G-Cyrillus · Answer 2 · 2015-02-06T23:57:43.327

You could as well use a method with pseudo elements.

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

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

You can play with it in http://codepen.io/gc-nomade/pen/raYGyO ... add radius, transform, whatever :)

itaya · Answer 3 · 2019-05-27T14:51:12.907

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

Live demo: http://jsfiddle.net/85saaphw/

If you want the triangle to be upside-down just change the transform: rotate(45deg) arg to 225deg.

Creating a transparent CSS triangle over a background image

Edit

3 Answers3