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.

Home RGB View Color Picker Color Gradient Font Test Tool 3 column Layout Generator JS Regular Expression Tester
Grid Layout JS tabs Social bookmark

The layout of this page was generated by one column layout generator