CSS triangles with border properties

Making triangle arrows with CSS border properties

We have demonstrated making triangle arrows using 1px divs. Here we try another simple way to make triangle arrows using CSS border properties. It uses fewer CSS codes and only one div tag.

The HTML tag is just one div tag. It looks like

<div id="box1" class="int" ></div>

Now Lets look at CSS codes. First set the height and width of the div to 0. The last 2 lines is to make it work in IE 6.

arrows in 4 directions

.int {
height: 0px;
width:0px;
line-height:0px;
font-size:0px;
}

arrow to left

#box1 {
border-bottom: 10px solid green;
border-top: 10px solid green;
border-right: 10px solid #000;
}

arrow to right

#box2 {
border-bottom: 10px solid green;
border-top: 10px solid green;
border-left: 10px solid #000;
}

arrow to top

#box3 {
border-right: 10px solid green;
border-bottom: 10px solid #000;
border-left: 10px solid green;
}

arrow to bottom

#box4 {
border-right: 10px solid green;
border-top: 10px solid #000;
border-left: 10px solid green;
}

In the real use, change the green color to the background-color of the page.

Social Bookmark if the page is useful.