Right banner arrows purely in CSS

Question

I'm trying to recreate these arrows in CSS for a website I'm redesigning to be responsive. These two guys were done with static images but I'd like them to be pure CSS.

This is a sprite that was used for mouseover replacement. The bottom is the mouseover state. The background behind the arrow needs to be transparent.

I thought it would be a simple div with a p or heading tag inside:

<div class="arrow_box">
  <p>UTILITIES</p>
</div> 

I've searched for examples everywhere and everything I've tried to modify never lets me seem to have full control of the width and height of the element. The width (with the arrow) is 114px. The height (of a single state) would be 29px.

I've played with this for the better part of an hour trying to get it properly sized but nothing seems to work. http://codepen.io/anon/pen/bpBGQL My lack of knowledge on how this works is partially to blame.

Answer 1

So the trick, here, is being able to control the height correctly. Here, I've got the text in a span with a line-height : 0 , and padding:15px . Now, we have precisely 30px of height, and can use an ::after pseudo element to fabricate the arrow. The width will be set by the text content, but can be defined with an explicit width rule, as well.

<div class="arrow"><span>text</span></div>

.arrow{
  display:inline-block;
  height:auto;
  background-color:orange;
}

.arrow span{
  display:inline-block;
  line-height:0;
  padding:15px;
  color:white;
}

.arrow::after{
    width: 0;
    height: 0;
    position: absolute;
    right:0
    top: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid orange;
    content: "";
}

Add whatever colors / hover states you require. You can see some basic rules in the working fiddle.

Fiddle

Answer 2

You can do this with :after pseudo element. You can change color of pseudo element on hover state like this .arrow_box:hover:after

 * { box-sizing: border-box; } p { margin: 0; padding-left: 10px; } .arrow_box { background: #627680; display: block; color: white; position: relative; height: 30px; line-height: 30px; width: 114px; transition: all 0.3s ease-in; } .arrow_box:after { content: ''; height: 0; width: 0; position: absolute; top: 0; right:0; transform: translateX(100%); border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 20px solid #627680; border-right: 15px solid transparent; transition: all 0.3s ease-in; } .arrow_box:hover { background: #2A92C2; } .arrow_box:hover:after { border-left: 20px solid #2A92C2; } 

 <div class="arrow_box"> <p>UTILITIES</p> </div> 

Answer 3

did you consider gradient backgrounds ?

 body { background: linear-gradient(45deg, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray); /* demo purpose only */ } .arrow { text-transform: uppercase; /* optionnal */ padding: 3px 1.5em 3px 0.5em; color: white; background: linear-gradient(225deg, transparent 0.6em, #627680 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #627680 0.6em) bottom no-repeat; background-size: 100% 50%; /* each gradient draws half of the arrow */ } .arrow:hover { /* update gradient color */ background: linear-gradient(225deg, transparent 0.6em, #2A92C2 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #2A92C2 0.6em) bottom no-repeat; background-size: 100% 50%; } 

 <span class="arrow"> Utilities</span> <span class="arrow"> testing</span> 

You may also want to take a look at Responsive Arrow Breadcrumb Navigation for breadcrumbs and imbricated arrows or Create dynamic arrow-like shape with CSS

Answer 4

Does this pen provide what you need? http://codepen.io/anon/pen/dMOPmV (may require some pixel pushing to get it perfect)

It just required adjusting:

border-width: 27px;
margin-top: -35px;

and adding a hover state for the main element and before element.