How to make transparent arrow?

Question

I have this issue, I can't figure out how I can make the the arrow transparent.

So basically I just use :after to make a border with these values to make an arrow. But what I would like is to make the arrow transparent so you could see the background image, which is a background image in the header tag.

The CSS:

html,body {
    width:100%;
    height:auto;
    font-family:'open-sans', sans-serif;
}
header {width:100%;}
main {
    width:100%;
    min-height:50vh;
    position:relative;
}
main:after {
    top:0;
    left:50%;
    border:solid transparent; 
    content:""; 
    height:0; 
    width:0; 
    position:absolute; 
    border-color: rgba(0, 0, 0, 0); 
    border-top-color:#2a2a2a; 
    border-width:60px; 
    margin-left: -60px;
}

The HTML:

    <header class="bg__header">
    </header>
    <main>
        <article></article>
    </main>

Fiddle

And here a golden example of what I want to achieve:

Answer 1

This can be done but will require some extra pseudo elements. You need to reverse your logic a little and make the arrow "cut out" the background as CSS arrows are achieved using borders and can't have background images.

• Make .bg__header position: relative; to ensure the pseudo elements are positioned relatively to it.
• Add .bg__header:before and .bg__header:after, these will provide the white borders left and right of the transparent arrow.
• Amend main:after to make the arrow transparent and the sides white.

You've got quite a bit of code in your fiddle so for simplicity sake these are the changes:

.bg__header {
    position: relative;
}
.bg__header:before {
    content:"";
    background-color: white;
    height: 60px;
    position: absolute;
    bottom: 0;
    width: 50%;
    left: -60px;
}
.bg__header:after {
    content:"";
    background-color: white;
    height: 60px;
    position: absolute;
    bottom: 0;
    width: 50%;
    right: -60px;
}
main:after {
    border-color: white;
    border-top-color: transparent;
    top: -60px;
}

JS Fiddle: http://jsfiddle.net/2pjxfs4n/2/