2

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:

transparent arrow

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Morten Pradsgaard
  • 184
  • 11

3 Answers3

6

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/

Hidden Hobbes
  • 13,893
  • 3
  • 38
  • 64
0

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

frontendgirl
  • 787
  • 5
  • 14
0

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

Sunil Hari
  • 1,716
  • 1
  • 12
  • 20