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; }
Clever…
But I call gimick on this one, I’m afraid.
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!
This is excellent! I also thought it was a gimick at first b/c it doesn’t seem possible.
Thanks for this . Very cool techniques !
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!
(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.
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.
hi..
i need to draw border with padding using image magic can u pls help me..
This works, which amazes me. How to get it to work on a larger scale, I must do.