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