Tam giác thả xuống css

CSS giúp chúng ta tạo ra các loại hình dạng từ hình vuông, hình tròn, hình tam giác như trò chơi mực. v đến các dạng phức tạp khác nhau, nếu bạn code css tốt thì bạn có thể tạo ra các dạng theo ý muốn ^^

Nội dung chính Hiển thị

• CSS tam giác
• Kết luận

Hôm nay mình sẽ hướng dẫn các bạn chi tiết cách code Triangle CSS, đây là dạng này được sử dụng nhiều nhất cho dropdown, chính vì thế trong bài viết này chúng ta sẽ thực hiện việc tạo Triangle CSS nhé!. Tam giác CSS, đây là dạng này được sử dụng nhiều nhất cho menu thả xuống, chính vì thế trong bài viết này chúng ta sẽ thực hiện việc tạo Tam giác CSS nhé

CSS tam giác

HTML

Đầu tiên ta cần tạo một số div để tạo ra các tam giác theo các hướng khác nhau

To started thì mình sẽ set width và height cho div như sau

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

Bây giờ chúng ta sẽ thử tạo một hình tam giác lên, ý tưởng ở đây là chúng ta sẽ bỏ

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

3 và

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

4 của hộp đi. Và

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

3 của đường viền sẽ tạo ra chiều rộng và chiều cao cho hộp. tam giác lên, ý tưởng ở đây là chúng ta sẽ bỏ

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

3 và

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

4 của hộp đi. Và

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

3 của đường viền sẽ tạo ra chiều rộng và chiều cao cho hộp

Box of them ta after set

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

9 and

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

0 sẽ nhìn như sau

Bạn có thể thấy ở trên, vì chiều rộng và chiều cao của hộp lúc này được đặt giá trị 0, nên chiều rộng của đường viền sẽ co lại ở chính giữa hộp

Nhìn vào hình trên thì mình nghĩ các bạn phần nào đã hình dung ra cách làm rồi đúng sai 🌝. Cách làm rất đơn giản, giả sử bây giờ mình muốn tạo tam giác lên thì các bạn để ý ở viền dưới, nó có dạng tam giác lên là màu đỏ đúng không?. tam giác lên thì các bạn để ý ở viền dưới, nó có dạng tam giác lên là màu đỏ đúng không?

Bây giờ chúng ta sẽ làm nền cho các biên giới khác là

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

1 to hide othertam giác đi. nền của các đường viền khác nhau là

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

1 để ẩn các hình tam giác khác đi

If to border-top. 50px trong suốt; . Cho nên chúng ta sẽ bỏ border-top đi bằng cách xóa chúng đi luôn ^^

Mã tam giác của chúng tôi sẽ như sau. tam giác của chúng tôi sẽ như sau

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

2

Cùng xem kết quả thôi nào ^^

Bây giờ chúng ta đã hiểu ý tưởng để tạo ra

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

2 rồi, việc tạo ra các_______12 theo hướng khác nhau cũng tương tự như vậy

Tam giác xuống

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

5

Tam giác trái

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

6

Tam giác phải

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

0

Mình có một cách ghi nhớ thế này để code nhanh hơn ^^

Nếu tạo đỉnh tam giác, chúng ta chỉ cần đặt nền cho viền đối diện. Hai bên để

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

4. Tương tự cho các hướng còn lại ^^. tam giác trên cùng thì chúng ta chỉ cần đặt nền cho viền đối diện. Hai bên để

#triangle-up {
  background: blue;
  width: 200px;
  height: 200px;
}

4. Tương tự cho các hướng còn lại ^^

Kết luận

Như vậy là mình đã giới thiệu cho các bạn cách mã tam giác trong css và ý tưởng để mã. Hy vọng bài viết này sẽ giúp ích cho các bạn ^^