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

Huy Trần viết ngày 02/12/2015

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

alt text

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 =))
Kiểu như 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:

alt text

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ả:

alt text

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 widthheight 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;
  width: 0; height:0;
}

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

alt text

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, righttop xem sao:

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

alt text

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

Tuỳ biến CSS Arrow

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;
  width: 0; height:0;
}

Kết quả:

alt text

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 leftright:

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

Kết quả:

alt text

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Trần

115 bài viết.
1766 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
168 46
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
Huy Trần viết hơn 3 năm trước
168 46
White
151 39
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết hơn 2 năm trước
151 39
White
108 17
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Huy Trần viết hơn 2 năm trước
108 17
Bài viết liên quan
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết 3 năm trước
18 10
White
9 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết hơn 3 năm trước
9 3
White
15 1
Giới thiệu cơ bản về Styled components 1. Styled components là gì? 1.1. Phương pháp css truyền thống Trước khi nói về styled components chúng ta...
danhuynhdev viết hơn 1 năm trước
15 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
115 bài viết.
1766 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!