Many websites have eye-catching CSS floating corners. These can be used for many purposes, such as advertations. In this post I'll explain how to create those CSS floating corners.

If you're viewing this page, you'll see one floating corner in your browser. Even when you resize your browser, the corner will stick to his position.

To accomplish this, use the following CSS code. In this example I'll only explain the "upperLeft" corner.

#upperLeftCorner {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    overflow: visible;
    width: 300px;
    height: 300px;
    margin: 0 0 0 0;
    padding: 0;
    z-index: 9999;
    border: none;
    float: none;
  }

<div id="upperLeftCorner">
  <img src="upperleftcorner.gif" border="0">
</div>

That's it. To make the corners look a little bit see trough, the DIV will be:

<div id="upperLeftCorner">
  <img src="upperleftcorner.gif" border="0" 
style="filter:alpha(opacity=60);opacity: 0.60;-moz-opacity:0.60;">
</div>

For the code of the four corners, go to the floating CSS corners and check out the source code.

Enjoy this knowledge and use it wisely.

Interested in this topic? You might enjoy another article I've written called

• Experimenting with the element() CSS function
• Why you want to use the :any() CSS selector
• Webkit Bug: Hover and Sibling Selector
• New CSS3 properties added to Firefox 3.6
• Best of the Best: 2009

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: