Adobe-like Arrow Headers

Adobe has some pretty cool header bars for modules on their site. The header bar is divided into left and right sections. The left being an explanatory title and the right being a related link. But let’s get super critical of how they did it.

First of all, they use a non-sprited image to do it:

That means an extra HTTP request just for the headers. Worse, the :hover effect is a totally separate image. That means yet another HTTP request and a “flash of black” while the second image loads on your first hover.

We can do it with zero images! Here’s our version:

The markup for the header is just a title with a link inside:

<div class="module">
  <h2>Community <a href="#">Blue</a></h2>
  <!-- stuff in module -->
</div>

Here’s the basic setup of the header, with the link on the right with basic coloring, including the straight white line made by a border:

.module h2 {
	background: #ccc;
	padding: 0 0 0 10px;
	font-size: 16px;

	/* Thickness of the bar more easily achieved with line-height
	   since padding would push link inward.  */
	line-height: 2; 
}
.module h2 a {
	float: right;
	position: relative;
	text-decoration: none;
	color: #333;
	padding: 0 10px;
	border-left: 5px solid white;
}

Now the trick to getting the arrow within the line is just using CSS triangles applied via the ever-useful pseudo elements.

.module h2 a:before,
.module h2 a:after {
	content: "";
	position: absolute;
	/* Pushed down half way, will get pulled back up half height of triangle
	   ensures centering if font-size or line-height changes */
	top: 50%;
	width: 0;
	height: 0;
}
.module h2 a:before {
	left: -12px;
	/* Triangle */
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid white;
	/* Pull-up */
	margin-top: -8px;
}
.module h2 a:after {
	/* Smaller and different position triangle */
	left: -5px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #a2d6eb;
	margin-top: -6px;
}

One significant difference between ours and theirs is that they have a gradient that goes right through the triangle. That’s not possible with ours as it’s not practical to apply gradient with the CSS triangle technique. That’s not to say gradients are out though, you’d just need to make sure that where the triangle attaches to the main link, the color is solid.

For the demo page I added a few different colors, transitions, and examples where double-triangles could be used to fake an angled line.

View Demo   Download Files