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