Hướng dẫn how do you make a triangle with css? - Làm thế nào để bạn tạo ra một hình tam giác với css?

HTML

Bạn có thể làm cho họ với một div duy nhất. Thật tốt khi có các lớp học cho mỗi khả năng hướng.

CSS

Ý tưởng là một hộp có chiều rộng và chiều cao bằng không. Chiều rộng và chiều cao thực tế của mũi tên được xác định bởi chiều rộng của đường viền. Ví dụ, trong một mũi tên UP, đường viền dưới cùng được tô màu trong khi bên trái và phải trong suốt, tạo thành hình tam giác.

.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; 
}

Thử nghiệm

Xem hoạt hình bút để giải thích các hình tam giác CSS của Chris Coyier (@Chriscoyier) trên Codepen.

Ví dụ

Dave Everitt viết trong:

Đối với một tam giác đều, nó có giá trị chỉ ra rằng chiều cao là 86,6% chiều rộng SO