Tạo CSS Triangle đơn giản, nhanh chóng trong một nốt nhạc

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

Hôm nay mình sẽ hướng các bạn chi tiết cách code Triangle CSS, đây là hình 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 tạo Triangle CSS nhé.

Triangle CSS

HTML

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

<div id="triangle-up"></div>
<div id="triangle-down"></div>
<div id="triangle-left"></div>
<div id="triangle-right"></div>

Để bắt đầu 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 triangle up, ý tưởng ở đây là chúng ta sẽ bỏ width và height của box đi. Và width của border sẽ tạo ra width và height cho box.

Box của chúng ta sau khi set width: 0 và height: 0 sẽ nhìn như sau:

Bạn có thể thấy ở trên, vì width và height của box lúc này được set giá trị 0, nên các width của border nó sẽ co lại tại chính giữa box.

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 không 🌝. Cách làm rất đơn giản, giả sử bây giờ mình muốn tạo triangle up thì các bạn để ý ở border bottom, nó có hình dạng triangle up là màu đỏ đúng không?.

Bây giờ chúng ta sẽ để để background của các border khác là transparent để ẩn các triangle khác đi.

Nếu để border-top: 50px solid transparent; chúng ta sẽ có height của box thêm 50px do height box lúc này phụ thuộc vào width border. Cho nên chúng ta sẽ bỏ border-top đi bằng cách xóa chúng đi luôn ^^.

Code triangle up của chúng ta sẽ như sau:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

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

Bây giờ chúng ta đã hiểu ý tưởng để tạo triangle rồi, việc tạo các triangle theo hướng khác nhau cũng tương tự như vậy:

Triangle down

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;

  border-top: 50px solid red;
}

Triangle left

#triangle-left {
  width: 0;
  height: 0;

  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid yellow;

}

Triangle right

#triangle-right {
  width: 0;
  height: 0;

  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid yellow;

}

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

Nếu tạo triangle top thì chúng ta chỉ cần set background cho border phía đối diện. Hai bên để background: transparent. 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 code triangle trong css và ý tưởng để code. Hy vọng bài viết này sẽ giúp ích cho các bạn ^^.

Chúng ta sẽ gặp nhau trong các bạn viết sắp tới nhé. Chúc các bạn học tốt.

Chủ đề tương tự:

1. CSS :focus-within bạn đã biết chưa
2. Khác nhau giữa display: none vs visibility: hidden trong CSS
3. CSS Units - Tìm hiểu về REM và EM trong CSS