Cult-Foo

CSS: Magic of “border” property

css_border You still using images to code such thing?

Cult-f.net is a daily website dedicated to everything related to outstanding WEB design and technologies.

Cult-f.net

In this case we are going to you :)

To accomplish this task we need only one thing – well-known HTML element property – border. This property has one unique ability – borders of the joint angles is divided in equal shares.

For example to get square divided on 4 parts with 45 degrees angle like this one:

you need only one line of code

<div style="
border-top:25px solid gray;
border-left:25px solid red;
border-bottom:25px solid black;
border-right:25px solid green;
width:0;
height:0">
</div>

More examples:

a piramyd

css

border-left:30px solid #FFF;
border-right:30px solid #FFF;
border-bottom:50px solid #FF8400;
width:0;
margin-bottom:30px;

a bow tie

css

width:0;
height:0;
border:30px solid yellow;
border-top:15px solid white;
border-bottom:15px solid white

an arrow

right

css

.right_arrow {
width:150px
height:50px;
position:relative;
}
.right_arrow .body {
width:100px;
text-align:center;
height:50px;
line-height:50px;
background:yellow;
}

.right_arrow .arrow {
position:absolute;
left:100px;
height:0;
top:0;
border:25px solid #fff;
border-left:10px solid yellow;
}

an another arrow

left

css

left_arrow {
height:50px;
width:150px;
position:relative;
}
.left_arrow .arrow {
border:25px solid #FFF;
border-right:25px solid #CC0000;
width:0; height:0;
overflow:hidden;
margin-left:-25px;
}
.left_arrow .body {
margin:-35px 0 0 25px;
top:15px; left:25px;
height:20px;
background:#CC0000;
color:white;
text-align:center;
}

Did you like it? Help us spread the word!

9 Responses to "CSS: Magic of “border” property"

  1. Dan says:

    Clever…

    But I call gimick on this one, I’m afraid.

  2. Hugo says:

    Sorry Dan..but that was lame. Anytime you can code using CSS/HTML only and create great replacements for images or even Javascript…I say go for it! Good job elPas0!

  3. This is excellent! I also thought it was a gimick at first b/c it doesn’t seem possible.

  4. Desiztech says:

    Thanks for this . Very cool techniques !

  5. Very nice, but I would rather use an image than CSS. Too many browser issues that ‘could’ occur.

    However I do think this is cool!

  6. (flame warning) To those ‘tards who think this is a hack or some unstable CSS rendering issue: you’re stupid. You have no idea what you’re talking about, and you’re spreading FUD based on your own personal bias and with nothing — not a single thing — to back up your beliefs.

    This is a well-documented technique that has been published since 2001. Read that again: 2001, lame-o.

    Ajaxian covered it:
    http://ajaxian.com/archives/using-polygonal-css-for-imageless-tooltips-and-more

    jQuery UI uses it:
    http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/

    And the original work was done by someone named Tantek (again, in 2001):
    http://tantek.com/CSS/Examples/polygons.html

    Do not be afraid to use this technique, and do not spread fear just because you see this as a "gimick"*.

    * It’s spelled "gimmick", btw.

  7. Design Jar says:

    Ive seen this on another site recently and I have never tried this before. For all that extra effort in the code I think Il still use the image but great tut anyhow.

  8. karthic says:

    hi..
    i need to draw border with padding using image magic can u pls help me..

  9. Nick says:

    This works, which amazes me. How to get it to work on a larger scale, I must do.

Trackbacks/Pingbacks

Do you have something to say?