CSS: Magic of “border” property

You still using images to code such thing?

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

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

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