After all these years I still discover new ways in which to use css. This week I came across css shapes, while looking for a way to make an arrow for a menu rollover.

In this design, each active menu item has a unique shape. I couldn’t use a bitmap here, because the text in each menu item could change in size. The client could add new items, or make existing ones shorter or longer. With css shapes – and a little help of jQuery – the arrow gets dynamically re-sized to match the menu item width.


See the Pen EjaYpN by pawel (@paweldebik) on CodePen.

Here’s the html, css, and jQuery that makes it all work:


	<div id="navi-example">
			<li ><a href="">item 1</a></li>
			<li ><a href="">item 2</a></li>
			<li ><a href="">item 3</a></li>
			<li ><a href="">item 4</a></li>
			<li ><a href="">item 5</a></li>


	#navi-example ul {
		list-style: none;
		background-color: black;

	#navi-example li {
		float: left;
		width: 20%;

	#navi-example a {
		color: white;
		line-height: 50px;
		padding: 17px 20px;
		text-decoration: none;
		text-transform: uppercase;

	#navi-example a:hover { background-color: #3c89c8; }


	$('#navi-example li a').hover(function(){
		var w = $(this).width()+40;
		var z = (($(this).width())/2)+20;

		$(this).after('<div class="hover-bottom" \
		style=\'border: #3c89c8; \
			border-left: '+z+'px solid transparent; \
			border-right: '+z+'px solid transparent; \
			border-top: 27px solid #3c89c8; content: ""; \
			height: 0; \
			margin: 0; \
			position: absolute; \
			width: 0;\'></div>');

		$(this).before('<div class="hover-bottom" \
		style=\'height: 15px; \
			width: '+w+'px; \
			background-color: #3c89c8; \
			margin-top: -15px; \
			position: absolute; \'></div><div class="hover-bottom" \
		style=\'border-bottom: 15px solid #1b5d93; \
			border-right: 15px solid transparent; \
			height: 0; \
			width: 0; \
			margin-top: -15px; \
			margin-left: '+w+'px; \
			position: absolute; \'></div>');
	}, function(){