<html>
<head>
<title>Div example</title>
</head>
<body>
<style type="text/css">
.colors {
border-color: red green blue yellow;
}
.square_1 {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px;
}
.square_2 {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 40px 120px 40px;
}
.square_3 {
line-height:0px;
width:0px;
height:0px;
border-style:solid;
border-width:30px;
}
.triangle {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 8px;
border-color: white black black white;
}
.arrow_left_10px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 10px 5px 0px;
border-color: white black white white;
}
.arrow_right_10px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0px 5px 10px;
border-color: white white white black;
}
.arrow_up_10px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 5px 10px 5px;
border-color: white white black white;
}
.arrow_down_10px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 5px 0px 5px;
border-color: black white white white;
}
.arrow_left_16px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 8px 16px 8px 0px;
border-color: white black white white;
}
.arrow_right_16px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 8px 0px 8px 16px;
border-color: white white white black;
}
.arrow_up_16px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 8px 16px 8px;
border-color: white white black white;
}
.arrow_down_16px {
line-height: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 16px 8px 0px 8px;
border-color: black white white white;
}
</style>
triangle: <div class="triangle"></div>
<br />
arrow right 10px: <div class="arrow_right_10px "></div>
<br />
arrow left 10px: <div class="arrow_left_10px "></div>
<br />
arrow up 10px: <div class="arrow_up_10px "></div>
<br />
arrow down 10px: <div class="arrow_down_10px "></div>
<br />
arrow right 16px: <div class="arrow_right_16px"></div>
<br />
arrow left 16px: <div class="arrow_left_16px"></div>
<br />
arrow up 16px: <div class="arrow_up_16px"></div>
<br />
arrow down 16px: <div class="arrow_down_16px"></div>
<br />
square 1: <div class="square_1 colors"></div>
<br />
square 2: <div class="square_2 colors"></div>
</body>
</html>