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; }