Home » Fresh Foo » CSS: Magic of “border” property

CSS: Magic of “border” property

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"

Dan says:
Clever…
But I call gimick on this one, I’m afraid.
March 17, 2009 at 6:21 pm Reply
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!
March 18, 2009 at 5:43 am Reply
Austin Schneider says:
This is excellent! I also thought it was a gimick at first b/c it doesn’t seem possible.
March 18, 2009 at 6:19 pm Reply
Desiztech says:
Thanks for this . Very cool techniques !
March 20, 2009 at 7:11 am Reply
Freehill Media Web Design says:
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!
March 24, 2009 at 2:00 am Reply
Michael Thompson says:
(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.
April 7, 2009 at 9:45 pm Reply
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.
April 10, 2009 at 12:32 am Reply
karthic says:
hi..
i need to draw border with padding using image magic can u pls help me..
May 1, 2009 at 12:10 pm Reply
Nick says:
This works, which amazes me. How to get it to work on a larger scale, I must do.
March 1, 2010 at 9:41 pm Reply