Placing text on a CSS trapezoid - css

Question

I have inherited a legacy app for a rewrite and have run across a curious problem. There is tabular data displayed on the page where the title of the table is within a trapezoidal shape that resembles a manila envelope tab. At the bottom of such tables, there is usually a button row that is the same shape as the table title but rotated 180°. Currently, this effect is being pulled off by using a square image with a white triangle in one half on a transparent background as a background image in the corner of a rectangular block to achieve the look of a trapezoid. However, this technique is prone to flickering when the page is refreshed.
As an exercise, I have tried to see if I can replace this with a pure CSS technique. I found this link to different shapes in CSS and have emulated the trapezoid to look as I need. I am able to place the table title text within a trapezoid correctly. However, when I need the look of the 180° rotated trapezoid, I am unable to get the text to place within the shape. My code is included below and here is a jsFiddle showing what I have accomplished so far. I understand that the text shows below the rotated trapezoid because the height is set to 0 and I'm using border-top to build the shape. Is there anything I can do to get this to work correctly?
Please keep in mind that I need this to display in IE8 (and possibly also IE8 in compatibility mode -- IE7). Also, I'd like to keep additional HTML elements to a minimum because I want to keep this as semantic as possible. I know I can place a span inside the div and absolutely position that span so that it displays the text within the shape, but when I do that I have to manually set a width on the trapezoid and when the width can vary from button row to button row, I'd rather not go down that path.
Thanks.
HTML:
<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>​
CSS:
.trap {
color: black;
font: normal bold 13px Arial;
border-bottom: 27px solid #F00;
border-right: 27px solid transparent;
height: 0px;
float: left;
line-height: 27px;
padding: 0 4px;
}
.trap180 {
clear: both;
color: black;
font: normal bold 13px Arial;
border-top: 27px solid #F00;
border-left: 27px solid transparent;
height: 0px;
float: right;
margin: 20px 0 0 0;
line-height: 27px;
padding: 0px 4px 0;
}​

Answer 1

It's possible with pseudo-elements. But I don't have access to those old browsers to test.
.trap, .trap180 {
color: black;
font: normal bold 13px Arial;
float: left;
line-height: 30px;
height: 30px;
padding: 0 4px;
background: salmon;
position: relative;
}
.trap180 {
float: right;
margin: 20px 0 0 0;
}
.trap:after,.trap180:after {
content: '';
position: absolute;
height: 0px;
width: 40px;
top: 0;
}
.trap:after {
right: -30px;
border-bottom: 30px solid salmon;
border-right: 30px solid transparent;
z-index: -10;
}
.trap180:after {
left: -30px;
border-top: 30px solid salmon;
border-left: 30px solid transparent;
z-index: -10;
}
​
Demo
Frankly, if you need to still support IE7, I would just use images or allow a little graceful degradation.