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

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

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

1 và

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

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

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

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

4 and

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

0 will look as after

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?

Bây giờ chúng ta sẽ để 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

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

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

2 rồi, việc tạo ra các

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

2 theo hướng khác nhau cũng tương tự như vậy

Tam giác xuống

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

  border-top: 50px solid red;
}

Tam giác trái

________số 8

Tam giác phải

#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 đỉnh tam giác, chúng ta chỉ cần đặt nền cho viền đối diện. Hai bên cho

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

Vùng chọn trong CSS đóng vai trò rất quan trọng khi viết CSS, bởi vì nếu bạn sử dụng vùng chọn sai thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi hoặc thực thi không đúng chỗ. Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng lựa chọn là kỹ thuật quan trọng hàng đầu khi bạn sử dụng CSS

Vùng chọn trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ thứ gì từ thẻ

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

5 đi sâu vào các thẻ bên trong nó. Ở bài này mình sẽ nói qua các kiểu sử dụng vùng chọn cơ bản nhất vì bạn sẽ sử dụng nó thường xuyên nhất, ngoài ra còn có các kiểu sử dụng vùng chọn nâng cao khác mình sẽ nói ở loạt phim gần cuối

Lựa chọn vùng là gì?

Trong CSS, vùng chọn có nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước chữ của thẻ h1 thì vùng chọn của bạn sẽ là h1

Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML

Các loại vùng lựa chọn cơ bản

Vùng lựa chọn dựa trên tên thẻ

Kiểu vùng chọn này là đơn giản nhất, nghĩa là nó sẽ chọn toàn bộ các phần tử trên tài liệu HTML dựa trên tên thẻ có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối style cho toàn bộ thẻ

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

6 trong trang web thì sẽ có đoạn CSS sau với vùng được chọn

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

6

Xem Bút NPVEyz của Thạch Phạm (@thachpham92) trên CodePen

Dĩ nhiên với kiểu sử dụng vùng chọn này thì toàn bộ các thẻ HTML trong trang web được chọn trong CSS đều biến đổi theo, tức là bạn không thể sử dụng kiểu chọn tên thẻ để viết CSS cho một khu vực độc lập

Lựa chọn vùng dựa trên ID

Lựa chọn vùng dựa trên ID (tên định danh) có nghĩa là bạn có thể chọn một phần tử có thể dựa vào giá trị của thuộc tính

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

8 trong thẻ HTML. Sở dĩ vùng chọn id được sử dụng để chọn một phần tử có thể là do trên một trang tài liệu HTML thì mỗi phần tử phải mang một id riêng biệt không trùng nhau

Id được thiết lập dựa trên thuộc tính

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

8 trong thẻ HTML và bất kỳ thẻ nào cũng có thể sử dụng id. Khi viết tên id vào CSS thì nó phải có dấu thăng (

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

0) đặt trước tên id để phân biệt với các loại vùng chọn khác. Ví dụ

Xem Bút BygBGQ của Thạch Phạm (@thachpham92) trên CodePen

Rõ ràng bạn thấy ở ví dụ trên mình có hai thẻ

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

6 nhưng mình muốn viết CSS cho một thẻ

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

6 cụ thể nào đó thì sẽ đặt id riêng cho phần tử mà mình cần viết CSS thay vì sử dụng vùng chọn dựa trên tên thẻ

Ngoài ra còn có một cách viết vùng chọn theo id khác là viết kèm theo tên thẻ đang sử dụng id đó như

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

3, lưu ý là phải viết sát nhau

Xin lưu ý rằng, một thẻ có thể chứa nhiều id khác nhau và mỗi tên id sẽ được cách nhau bởi khoảng trắng như thế này

[html]

Hello

[/html]

Vùng lựa chọn dựa trên lớp

Lớp (lớp) cũng rất được sử dụng phổ biến như id nhưng một điểm khác biệt của lớp là một lớp có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn id thì chỉ được sử dụng một lần duy nhất

Lớp được khai báo trong một phần tử HTML bởi lớp thuộc tính như

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

4. Khi khai báo vùng chọn lớp trong CSS, thì tên lớp phải được đặt sau dấu chấm (

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

60). Ví dụ về cách sử dụng class linh hoạt

Xem Bút bNPbzq của Thạch Phạm (@thachpham92) trên CodePen

Cũng giống như id, lớp cũng có thể được viết kèm theo kiểu thẻ tên h1. dính và phải liền nhau

Lựa chọn vùng theo thứ cấp

Kiểu vùng chọn này bạn cũng sẽ sử dụng rất thường xuyên, đặc biệt là khi tiến hành viết CSS cho trang web đó là phần tử chọn theo thứ cấp. Nghĩa là với vùng chọn này, bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó

Ví dụ mình có một đoạn HTML thế này

[html]

• Menu 1


• Menu 2


• Menu 3

• Facebook


• Twitter


• Google+

[/html]

Như ở đoạn trên, mình có hai danh sách với thẻ

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

61 mang 2 id khác nhau. Bây giờ mình muốn viết CSS cho các thẻ

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

62 trong cái danh sách

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

63 thì làm thế nào? . Lúc này, chúng ta sẽ sử dụng đến vùng lựa chọn thứ cấp

Để chọn các thẻ

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

62 bên trong

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

63, mình sẽ viết vùng chọn là

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

66 thay vì chỉ viết

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

67 trong CSS. Lúc này CSS sẽ hiểu rằng chúng ta muốn chọn tất cả các thẻ

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

62 nằm bên trong phần tử mang

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

63

Xem Bút WbqeBE của Thạch Phạm (@thachpham92) trên CodePen

Lựa chọn vùng theo cấp độ liền kề

Đây là một kiểu chọn vùng dựa theo thứ cấp, đồng thời giúp bạn chọn các phần tử bên trong một phần tử nào đó nhưng nó sẽ chỉ áp dụng cho các phần từ bên dưới nó để bật. Bây giờ mình có cái danh sách hai cấp bật như sau

[html]

[/html]

Nếu mình muốn viết CSS cho các thẻ

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

62 của Menu 1.a, Menu 1.b thì mình sẽ đặt vùng chọn là

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

61. Nếu diễn giải bằng chữ thì nó sẽ chọn thẻ

nằm trong thẻ

ở bật thứ hai và thẻ
đó nằm trong id #menu. Bạn để ý là với ví dụ trên mình có tới hai thẻ
.

Xem Pen WbqNeZ của Thạch Phạm (@thachpham92) trên CodePen


Thường thì cách viết vùng lựa chọn này bạn sẽ sử dụng khi tạo menu đổ xuống trong trang web

Lời kết

Ở trên là 4 kiểu thiết lập vùng chọn để viết CSS mà bạn sẽ thường xuyên sử dụng nhất, hầu hết như được sử dụng liên tục sau này khi viết CSS cho trang web nên bạn hãy cố gắng thử nghiệm cách sử dụng tập tin thấm nhuần nhất có thể nhé.