How to make transparent arrow? [duplicate] - html

Question

This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Triangle in CSS inside a box [closed]
(1 answer)
Closed 8 years ago.
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/

Answer 2

You can do this in another way. First of all, you do not need the this one rule
border-color: rgba(136, 183, 213, 0);
as it is not changing anything.
Inspite of using transparent option to your border present value of the border-top-color in rgba and use alpha chanel like this
border-top-color:rgba(42,42,42,0.4);
hope this will work for you

Answer 3

Not sure this is what you want.had set some width and height to the main:after and had rotated it so that it looks like an arrow
Modified main:after like this
main:after {
/*ARROW on header tag*/
top:-50px;
left:50%;
height:60px;
width:60px;
content:"";
position:absolute;
margin-left: -60px;
-webkit-transform:rotate(45deg);
border-bottom:solid 1px black;
border-right:solid 1px black;
}
CODE