how to create transparent arrow with css

Question

I am trying to create arrow in div using after in css, but cant make it as required.

This is the example image I am trying to create:

This is what I have created, but not sure how to control the background color of arrow

 .discount-tag { position: relative; float: left; background-color: rgba(61,97,153,0.9); font-size: 16px; color: #fff; text-transform: uppercase; padding: 7px 22px 7px 10px; } .discount-tag:after { right: 0; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #106199; border-width: 17px; margin-top: -17px; } 

 <div class="discount-tag"> 10% Discount </div> 

Answer 1

Try with two arrow parts. Set one on :before and one on :after

 .discount-tag { position: relative; float: left; background-color: rgba(61,97,153,0.9); font-size: 16px; color: #fff; text-transform: uppercase; padding: 7px 22px 7px 10px; } .discount-tag:before, .discount-tag:after { content: ''; display: block; position: absolute; right: -16px; width: 0; height: 0; border-style: solid; } .discount-tag:before { top: 0; border-width: 16px 16px 0 0; border-color: rgba(61,97,153,0.9) transparent transparent transparent; } .discount-tag:after { bottom: 0; border-width: 16px 0 0 16px; border-color: transparent transparent transparent rgba(61,97,153,0.9); } 

 <div class="discount-tag"> 10% Discount </div> 

To make it more obvious what's going on here the same but with dummy colors

 .discount-tag { position: relative; float: left; background-color: rgba(61,97,153,0.9); font-size: 16px; color: #fff; text-transform: uppercase; padding: 7px 22px 7px 10px; } .discount-tag:before, .discount-tag:after { content: ''; display: block; position: absolute; right: -16px; width: 0; height: 0; border-style: solid; } .discount-tag:before { top: 0; border-width: 16px 16px 0 0; border-color: green transparent transparent transparent; } .discount-tag:after { bottom: 0; border-width: 16px 0 0 16px; border-color: transparent transparent transparent red; } 

 <div class="discount-tag"> 10% Discount </div> 

Answer 2

You may rotate the pseudo and use box-shadow to paint the background of the parent tag.

So you can see through the arrow any plain or complex backgrounds.

Box-shadow can also allow you to draw borders:

 .discount-tag { position: relative; float: left; font-size: 16px; color: #fff; text-transform: uppercase; padding: 7px 32px 7px 10px;/* update */ overflow:hidden;/* added */ } .discount-tag:before { right: -21px;/* update */ top: 0; bottom:0;/* added */ width:34px;/* added */ transform:rotate(45deg);/* added */ content: " "; position: absolute; z-index:-1;/* added */ pointer-events: none; box-shadow:0 0 0 50vw rgba(61,97,153,0.9)/* added */ /* border : removed */ } body { background:url(http://lorempixel.com/600/800);/* see transparency */ } /* extra a border needed ? */ .discount-tag:before { box-shadow:0 0 0 50vw rgba(61,97,153,0.9), inset 1px -1px white; } .discount-tag { box-shadow: -1px 1px white, -1px -1px white 

 <div class="discount-tag"> 10% Discount </div> 

If you still want to use border : put pseudo outside :

 .discount-tag { position: relative; float: left; background-color: rgba(61,97,153,0.9); font-size: 16px; color: #fff; text-transform: uppercase; padding: 7px 10px; } .discount-tag:after { left:100%; top: 50%; border: solid rgba(61,97,153,0.9); content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color:transparent; border-width: 17px; border-left:none; margin-top: -17px; } body { background:url(http://lorempixel.com/600/800);/* see transparency */ } 

 <div class="discount-tag"> 10% Discount </div> 

Borders around can also be drawn:

 .discount-tag { position: relative; float: left; background-color:#3A609B; font-size: 16px; color: #fff; text-transform: uppercase; padding: 7px 10px; } .discount-tag:before,.discount-tag:after { left:100%; top: 50%; border: solid #3A609B; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color:transparent; border-width: 17px; border-left:none; margin-top: -17px; } body { background:url(http://lorempixel.com/600/800);/* see transparency */ } /* draw border around ? */ .discount-tag:before { border-width:18px; margin-top:-18px; margin-left:1px; border-color:white; border-right-color:transparent; } .discount-tag { border:1px solid white 

 <div class="discount-tag"> 10% Discount </div> 

Answer 3

You can add 2 pseudos, and skew them to create the tails of the arrow:

 .discount-tag { position: relative; float: left; background-color: blue; font-size: 60px; color: #fff; text-transform: uppercase; padding: 7px 22px 7px 10px; } .discount-tag:before, .discount-tag:after { content: " "; left: 0; right: 0; height: 50%; position: absolute; pointer-events: none; background-color: blue; z-index: -1; } .discount-tag:before { top: 0; transform-origin: center bottom; transform: skewX(-35deg); } .discount-tag:after { bottom: 0; transform-origin: center top; transform: skewX(35deg); } 

 <div class="discount-tag">10% Discount</div>