Có thể bạn biết rồi: CSS Arrow

Mình xin tiếp tục series bài viết "Có thể bạn biết rồi", lần này mình sẽ lại nói về một vấn đề được nhiều người biết tới nhưng mình nghĩ ít ai hiểu rõ nguyên lý đằng sau nó, đó là CSS Arrow

Nếu bạn chưa biết, thì CSS Arrow là một kĩ thuật giúp tạo ra một hình tam giác/mũi tên đính vào một thẻ div nào đó, thường được sử dụng để làm các tooltip hoặc các hộp thoại (giống như hộp lời thoại trong truyện tranh vậy)

Vì trong CSS, tất cả mọi element đều được thể hiện dưới dạng hộp (box), có thể là hình chữ nhật hoặc hình vuông, đôi khi sẽ là hình tròn hoặc hình chữ nhật có góc bo nếu bạn sử dụng border-radius, nhưng với những hình khối "quái" như tam giác hoặc ngôi sao năm cánh chẳng hạn, thì không có.

Thông thường, để tạo ra các mũi tên này, chúng ta thường sử dụng website http://cssarrowplease.com/

Vào đây chọn các thông số rồi copy đoạn CSS nó tạo ra, dán vào dự án và sử dụng.

Hoặc với một số bạn, có lẽ sẽ tìm vào các blog như trang này https://css-tricks.com/snippets/css/css-triangle/ để copy đoạn CSS tương ứng cho từng loại arrow mình cần.

Một đoạn CSS đơn giản thể hiện mũi tên hướng lên trên như sau:

.arrow-up {
    awidth: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
    border-bottom: 5px solid black;
}

Quá dễ phải không?

Vậy có bao giờ bạn tự hỏi, làm thế quái nào mà đoạn code trên nó tạo ra được một hình khối dạng mũi tên chưa? Và làm cách nào để tuỳ biến nó theo ý mình mà không phải ngồi mò, thay đổi từng thông số trong đoạn CSS kia cho đến khi nó vừa ý?

Như thế này =))

Nhìn vào đoạn code trên, chúng ta thấy đa phần là liên quan tới việc xử lý border, chính xác là 3 dòng code sau:

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
    border-bottom: 5px solid black;

Vậy border thì nó có liên quan quái gì tới việc tạo ra khối hình tam giác chứ? Chúng ta sẽ quay lại cơ bản về border trong CSS một tí.

Thuộc tính border giúp tạo ra đường viền bao quanh một element, ví dụ:

.box {
  ...
  border: 2px solid #333;
  ...
}

Kết quả của đoạn code trên tạo ra một hình chữ nhật có viền bao quanh màu đen cho 4 cạnh, có độ dày 2 pixel:

OK. Cái này quá dễ, ai cũng biết rồi. Vậy nếu chúng ta đặt 4 màu khác nhau cho 4 cạnh của hình chữ nhật trên, thì nó sẽ trông như thế nào?

.box {
  border-top: 5px solid #F00;
  border-right: 5px solid #0F0;
  border-bottom: 5px solid #00F;
  border-left: 5px solid #FF0;
}

Đoạn code trên đặt 4 màu khác nhau cho 4 cạnh của hình chữ nhật, mỗi cạnh có đường viền dày 5 pixel, và đây là kết quả:

Các bạn có nhận thấy điều gì không? Đó là giao điểm của các cạnh là những đường chéo, đến đây có lẽ các bạn cũng đã hình dung ra được tại sao chúng ta cần dùng border để tạo khối hình tam giác cho các thẻ div rồi đúng không?

OK, bây giờ chúng ta thử tăng độ dày của các border ở các cạnh lên, và giảm thuộc tính awidth và height của thẻ div về 0 xem sao nhé:

.box {
  border-top: 15px solid #F00;
  border-right: 15px solid #0F0;
  border-bottom: 15px solid #00F;
  border-left: 15px solid #FF0;
  awidth: 0; height:0;
}

Kết quả sẽ như thế này:

Vậy là chúng ta đã có được 4 hình tam giác xuất hiện với 4 màu khác nhau, tương ứng với màu của 4 cạnh rồi. Vấn đề bây giờ là làm sao để triệt tiêu 3 hình tam giác kia để lấy 1 hình tam giác theo hướng chúng ta cần thôi?

Xem lại đoạn code mẫu bên trên, chúng ta thấy có các cạnh được gán màu là transparent, vậy chúng ta sẽ thử gán màu này cho 3 cạnh left, right và top xem sao:

.box {
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #00F;
  border-left: 15px solid transparent;
  awidth: 0; height:0;
}

Tada! Vậy là chúng ta đã tạo được khối hình tam giác màu xanh:

Điều này có nghĩa là gì?

Kĩ thuật tạo hình tam giác, thực chất là lợi dụng việc trình duyệt hiển thị giao điểm của các cạnh trong một element dưới dạng đường chéo, chúng ta set độ cao và màu sắc cho một cạnh chúng ta cần tạo ra hình tam giác, và các cạnh còn lại để cho nó trong suốt (transparent)

Ở ví dụ trên, bạn có thể bỏ luôn thuộc tính border-top vì nó không nhất thiết phải nằm ở đó nữa. Tương tự như thế, với các hướng mũi tên khác, chúng ta chỉ việc giữ lại các cạnh tương ứng, làm trong suốt các cạnh còn lại là xong.

Vậy là chúng ta đã hiểu cơ chế tạo ra CSS Arrow, vậy làm cách nào để tuỳ biến nó? Trong ví dụ này, chúng ta sẽ chỉ xét hình tam giác có đỉnh hướng lên trên:

Tăng chiều cao của tam giác

Để tăng chiều cao cho hình tam giác này, chúng ta tăng kích thước border của cạnh bottom như sau:

.box {
  border-right: 15px solid transparent;
  border-bottom: 50px solid #00F;
  border-left: 15px solid transparent;
  awidth: 0; height:0;
}

Kết quả:

Tăng chiều rộng

Ngược lại, nếu muốn tăng chiều rộng của hình tam giác, chúng ta sẽ tăng độ rộng của 2 cạnh left và right:

.box {
  border-right: 50px solid transparent;
  border-bottom: 15px solid #00F;
  border-left: 50px solid transparent;
  awidth: 0; height:0;
}

Kết quả:

Dựa vào cơ chế trên, các bạn có thể tự tìm ra cách để tuỳ biến cho các khối hình tam giác có hướng xoay khác (trái, phải, hướng xuống dưới,...)

Hy vọng qua bài này, các bạn sẽ nắm rõ hơn về cơ chế hoạt động của CSS border cũng như cách để tạo và tuỳ biến các khối hình tam giác trong CSS.

Để kết thúc bài viết, mình xin giới thiệu một link khá hữu ích, minh hoạ việc sử dụng CSS để tạo ra các khối hình tuỳ biến, có nhiều khối rất là ảo: https://css-tricks.com/examples/ShapesOfCSS/

Hẹn gặp lại các bạn trong các bài viết sau ;)