Hướng dẫn arrow box css - hộp mũi tên css

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

Bản chất về hình khối trong CSS

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

Sử dụng CSS Arrow

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 {
    width: 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 =))

Cách tạo ra CSS Arrow

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

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

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

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

.box {
  border-top: 15px solid #F00;
  border-right: 15px solid #0F0;
  border-bottom: 15px solid #00F;
  border-left: 15px solid #FF0;
  width: 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à

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

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

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

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

.box {
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #00F;
  border-left: 15px solid transparent;
  width: 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 (

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

Ở ví dụ trên, bạn có thể bỏ luôn thuộc tính

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

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

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

.box {
  border-right: 15px solid transparent;
  border-bottom: 50px solid #00F;
  border-left: 15px solid transparent;
  width: 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

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

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

.box {
  border-right: 50px solid transparent;
  border-bottom: 15px solid #00F;
  border-left: 50px solid transparent;
  width: 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

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

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

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,...)

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