CSS Arrow

(7)
153 lượt xem
Share

Các dấu mũi tên điều hướng rất phổ biến trong các website hiện nay, nó được sử dụng trong rất nhiều trường hợp như: dropdown menu, move to top button, move to bottom button...Để tìm hiểu cách tạo Arrow như thế nào trong CSS, mời bạn đọc cùng eLib tham khảo bài viết dưới đây.

Mục lục nội dung

CSS Arrow

1. Xây dựng giao diện

Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body:

Code

<div class="container">
    <h2>Freetuts.net hướng dẫn tạo các dấu mũi tên</h2>
    <p>Right arrow: <i class="arrow right"></i></p>
    <p>Left arrow: <i class="arrow left"></i></p>
    <p>Up arrow: <i class="arrow up"></i></p>
    <p>Down arrow: <i class="arrow down"></i></p>
</div>

Các thành phần này đều rất đơn giản, chúng ta sẽ tạo các thẻ i để hiện thị các dấu mũi tên.

2. Thêm CSS cho giao diện

Chúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style:

.container {
    width: 80%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
}
h2 {
    text-align: center;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
p {
    width: 50%;
    margin: auto;
    text-align: center;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

Các đoạn mã trên đều rất cơ bản, các bạn có thể tuỳ chỉnh theo ý thích sao cho phù hợp nhất với website của mình.

Thuật toán chúng ta sử dụng ở đây như sau:
  • Đầu tiên là tạo border cho thẻ i, tuy nhiên chỉ tạo 2 cạnh của border, sau khi tạo ta sẽ được một icon là 2 cạnh của hình vuông.
  • Tiếp đến, ta sẽ sử dụng thuộc tính transform để xoay icon trên thành các dấu phù hợp.

Giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé.

Trên đây là bài viết của eLib.VN về CSS Arrow. Như vậy, qua bài viết này eLib đã cùng các bạn tạo các dấu mũi tên với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website.

(7)
153 lượt xem
Share
Ngày:11/11/2020 Chia sẻ bởi:Tuyết Trịnh
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM