Question

Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:

This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.

Here is the code I’ve been working with:

<STYLE type="text/css">
  .mini_banner 
  {
     display:inline;
     border-bottom:30px solid blue; 
     border-left:0px solid transparent;
     border-right:30px solid transparent;
  }
</STYLE>

I wanted to apply this to a cell in a table. I also don’t want to break compatibility with modern browsers. My “customers” (mostly internal people) are going to be primarily on IE8 or later but I don’t want to limit myself if I can help it.

So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?

Answer 1

I would say that you’ll have less headaches all the way around if you revert to using a single background image – in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:

.minibanner {
   background: blue url(..images/notch.png) no-repeat middle right;
   font-size: 1.5em;
 }

The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.

If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.

UPDATE:

The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:

<div>
    <p>Hello text</p>
    <span></span>
</div>

Then in your CSS:

    p { 
        background: blue; 
        color: white;
        float: left;
        padding: 0 20px;
        height: 50px;
        margin:0;
        line-height: 50px;
        }
    span {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 0px solid transparent;
        display: inline-block;
        border-left: 50px solid blue;
    }

See this JSFiddle.

The shape is based on this tutorial on CSS triangles. Now, I’ve only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.