Dùng CSS để tạo các hình tam giác

HTML

Đầu tiên, ta dựng file HTML:

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

Ý tưởng trong việc tạo hình tam giác bằng CSS đó là: ta tạo một hình có chiều cao và chiều rộng bằng 0. Chiều cao và chiều rộng của hình tam giác được tính theo chiều rộng của đường viền (border). Về màu sắc, đối với hình tam giác hướng lên trên, màu sắc của hình tam giác chính là màu của đường viền dưới (bottom border). Màu của đường viền hai bên (left border và right border) được đặt là trong suốt (transparent).

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;

  border-left: 60px solid green;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  border-right:10px solid blue;
}

Source: https://css-tricks.com/snippets/css/css-triangle/