Building a banner heading effect using HTML and CSS: Part 2

We take a look at how to add a bit of extra flourish to a pure HTML and CSS banner. We’re going to add a tail to an existing banner. You’ll need to use the code for the effect already created in part 1.

Let's look at how to create the effect used to create the tail of this box.

As a reminder, this is the stage we got to in the first part:

This is the story of...

...and then there were none.

Do you see the difference? Well, first we change the width to make the element a little shorter:

.banner-body-x {
    /* Choose the width you want, be careful the
     * text doesn't wrap. */
    width: 75%;
}

We also need to fix the height of the banner:

.banner-body-x {
    /* This should be bigger than the font-size. */
    height: 38px;
    /* Same as above for vertical alignment of
     * text. */
    line-height: 38px;
}

There, that’s the easy part out of the way. Now we need this bit of additional CSS:

.banner-heading-y:after {
    /* Allows precise positioning. */
    position: absolute;
    /* Required for element to render. */
    content: "";
    /* Half height: 38px, same colour. */
    border: 19px solid pink;
    /* This will create the forked effect. */
    border-right-color: transparent;
    /* Position to the right of the banner. */
    right: -19px;
    /* Position at the top of the banner. */
    top: 0;
}

The grand unveiling:

This is the story of...

...and then there were none.

As with the original banner, this technique makes use of CSS pseudo elements. We’ve already used :before to create the corner effect on the lefthand side of the banner. We still have :after at our disposal. Some clever use of borders creates the forked shape and hey presto…

The height of the banner needs to be fixed to ensure the pseudo element height can be set to match by using half this height as the border size. Using ems it is difficult to be pixel perfect. Be careful to choose a height which is greater than the font size or the alignment will not look right.

Read more

Further information about this and the effects you can create with CSS pseudo elements can be found at:

Tags: