This shape (an Isoceles Trapezoid) can be easily made using CSS3 by rotating a div
with a bit of perspective.
Explanation
- The shape is achieved by rotating an absolutely positioned pseudo-element (
.container:after
) along the x-axis with a perspective. - We are not rotating the actual container
div
because it would cause the link (and any other) text inside it also to be rotated. - Top border and an inset box shadow is used to mimick the shape exactly as shown in the figure in question. Top border produces the line with a lighter shade on top and the inset shadow produces the dark edges all around the shape.
- Since rotate transformations are not supported in lower versions of IE, the shape would not come in IE < 9. However, it would degrade gracefully into a rectangle shaped box in IE 8 and 9.
- IE 7 doesn’t support pseudo-elements and hence in that even the box would not appear but the links would show up as-is. However, the same behavior as in IE 8/9 could be achieved by adding conditional CSS (add background and shadows to the container
div
) to target only IE 7.
body {
font-family: Calibri;
background: #5F4014;
}
.container {
position: relative;
width: 90%;
text-align: center;
margin: 50px 5px;
}
.container:after {
position: absolute;
content: '\00a0';
width: 100%;
left: 10px;
top: 0px;
padding: 10px;
background: #4F0D00;
box-shadow: inset 0px 0px 10px 2px #340800;
border-top: 1px solid #715E49;
-webkit-transform: perspective(25px) rotateX(-3deg);
-moz-transform: perspective(25px) rotateX(-3deg);
transform: perspective(25px) rotateX(-3deg);
}
a {
position: relative;
display: inline-block;
color: white;
text-decoration: none;
width: 100px;
text-align: center;
padding: 10px;
z-index: 2;
}
a:hover {
color: gold;
}
a:active {
color: #ff6767;
}
<div class="container">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
Screenshot – From browsers that support transforms
Screenshot – From browsers that don’t support transforms (IE 8 and 9)
Fiddle Demo | JS Bin Demo – to check in IE < 9 which are not supported by JSFiddle.