Hộp mũi tên CSS

Mỗi phần tử popover có một mũi tên nhỏ. Chúng tôi thấy mô hình này ở khắp mọi nơi khi chúng tôi nhấp vào nút và div bật lên. Đây là một ví dụ về mẫu giao diện người dùng này – Mũi tên hộp

Trong bài đăng này, tôi sẽ hướng dẫn cách thức hoạt động của nó. Đây là một CodePen cho bài viết này

HTML chỉ là một div chứa một số văn bản

  This is me, Vijay Thirugnanam.

CSS cho div khá đơn giản

.box {
  position: relative;
  width: 200px;
  padding: 10px;
  background-color: steelblue;
  color: white;
}

Phong cách phức tạp duy nhất trong div là vị trí của nó. Nó được đặt thành tương đối. Điều này ngụ ý rằng chúng tôi muốn định vị một cái gì đó tuyệt đối trong div. Phần tử mà chúng tôi muốn định vị tuyệt đối là mũi tên. Để tạo mũi tên, chúng tôi sử dụng phần tử giả :before

CSS cho Mũi tên hộp

CSS cho Box Arrow là phần khó nhất

.box:before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  right: 10px;
  bottom: -16px;
  border-style: solid;
  border-width: 16px 8px 0px 8px;
  border-color: steelblue transparent transparent transparent;
}

Phần tử :before có nội dung trống và nó được định vị tuyệt đối. Nó được đẩy sang bên phải 10 pixel và xa hơn 16 pixel từ phía dưới. Quan trọng nhất, chiều rộng và chiều cao của phần tử này là 0. Mũi tên xuất phát từ việc tạo kiểu đường viền cho phần tử

Chúng tôi chia các thuộc tính đường viền. Đặt border-style thành khối. border-width nhận 4 giá trị. trên, phải, dưới, trái. Trên cùng được đặt thành 16 pixel và dưới cùng là 0 pixel. Điều này cho một hình tam giác. Đường viền bên trái và bên phải phải được đặt thành một giá trị nào đó và tạo thành đáy của hình tam giác

Một thuộc tính quan trọng khác cần đặt là border-color. Chỉ đường viền trên cùng có màu steelblue. Phần còn lại của đường viền có màu trong suốt

Khi bạn tạo loại mũi tên hộp này, vui lòng chơi với các thuộc tính border-width và border-color. border-width đưa ra kích thước của hình tam giác cũng như hướng của mũi tên. Trong khi thuộc tính border-color cho hình tam giác

Giải pháp được trình bày sử dụng một số thủ thuật, cho phép đặt hình dạng tam giác cho các phần tử div. Các div đó được sử dụng sau này với vị trí tuyệt đối là hình tam giác với hộp thích hợp. Sử dụng hai div tam giác giúp có thể quảng cáo đường viền bổ sung cho mũi tên, nội dung được trình bày bên dưới

Hộp thông báo là một cách tuyệt vời để tương tác với người dùng trên trang web. Nó được sử dụng để thông báo cho người dùng về hành động mà họ thực hiện trên một trang web. Đó có thể là lỗi, thành công hoặc thông báo thông tin để hướng dẫn người dùng. Hầu hết các thông báo như vậy được hiển thị trong hộp bật lên nhưng trong một số trường hợp, đó có thể là hộp thông báo tĩnh. Trong hướng dẫn này, chúng ta sẽ tạo một hộp thông báo có biểu tượng mũi tên bằng CSS thuần túy

Như bạn đã thấy trong hình trên, hộp thông báo này giống như một bong bóng đối thoại đang hiển thị một số nội dung văn bản. Trên thực tế, đó là một hộp div HTML có thể hiển thị mọi thứ bên trong nó. Vì vậy, hộp mũi tên này có thể được sử dụng làm chú giải công cụ hoặc trong hộp thông báo hướng dẫn du lịch

Khái niệm mã hóa cho hộp thông báo này thực sự đơn giản và dễ hiểu. Bạn chỉ cần tạo một phần tử div cho hộp thông báo, sau đó tạo một số kiểu CSS bằng cách sử dụng bộ chọn giả CSS:before và_______24_______. Vì vậy, hãy bắt đầu với HTML để tạo hộp thông báo

Cấu trúc HTML

Trước hết, tạo một phần tử div với tên lớp là “hộp” và thêm một lớp khác theo vị trí của mũi tên. Bạn có thể đặt mũi tên ở trên cùng, bên trái, bên phải hoặc bên dưới hộp thư. Vì vậy, hãy xác định lớp thứ hai là “đầu mũi tên” để hiển thị biểu tượng mũi tên ở đầu hộp thông báo

  This is some example text for your message.

Tương tự, các vị trí khác của biểu tượng mũi tên có thể được hiển thị bằng cách xác định các lớp như bên dưới

  This is a box with some content and an arrow at the top.



  This is a box with some content and an arrow on the right.



  This is a box with some content and an arrow at the bottom.



  This is a box with some content and an arrow on the left.

Bạn có thể đặt bất kỳ phần tử HTML nào bên trong hộp, chẳng hạn như các nút, hình ảnh hoặc bất kỳ thứ gì bạn muốn

Kiểu CSS cho Hộp thư có Mũi tên

Bây giờ, đã đến lúc tạo kiểu cho hộp thông báo bằng CSS. Nhắm mục tiêu “. box” và xác định chiều rộng, chiều cao nền, v.v. Ở đây, điều quan trọng là thuộc tính vị trí mà bạn cần giữ tương đối. Các thuộc tính khác như lề và phần đệm có thể được xác định theo nhu cầu của bạn

.box {
  width: 180px;
  height: auto;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
}

Sau đó, để lại một số khoảng trống trên đầu hộp bằng cách xác định thuộc tính lề-top. Sau đó, sử dụng CSS sau bộ chọn giả

  This is a box with some content and an arrow at the top.



  This is a box with some content and an arrow on the right.



  This is a box with some content and an arrow at the bottom.



  This is a box with some content and an arrow on the left.

.box.arrow-top {
  margin-top: 40px;
}

.box.arrow-top:after {
  content: " ";
  position: absolute;
  right: 30px;
  top: -15px;
  border-top: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid black;
}

Để hiển thị mũi tên bên phải, hãy xác định các kiểu CSS cho bộ chọn

  This is a box with some content and an arrow at the top.



  This is a box with some content and an arrow on the right.



  This is a box with some content and an arrow at the bottom.



  This is a box with some content and an arrow on the left.

.box.arrow-right:after {
  content: " ";
  position: absolute;
  right: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: none;
  border-left: 15px solid black;
  border-bottom: 15px solid transparent;
}

Để hiển thị biểu tượng mũi tên ở cuối hộp, chỉ cần xác định thuộc tính none cho thuộc tính border-bottom

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
}

Tương tự, sử dụng “none” cho border-left để đặt biểu tượng mũi tên ở bên trái hộp. Bạn có thể tăng/giảm độ dày của mũi tên bằng cách thay đổi giá trị của đường viền tương ứng là 15px

.box.arrow-left:after {
  content: " ";
  position: absolute;
  left: -15px;
  top: 15px;
  border-top: 15px solid transparent;
  border-right: 15px solid black;
  border-left: none;
  border-bottom: 15px solid transparent;
}

Sử dụng các truy vấn phương tiện CSS để làm cho hộp thông báo của bạn phản hồi nhanh trên các kích thước màn hình khác nhau

@media only screen and (min-width:240px) and (max-width: 768px){
    .box{
        display: block;
        float: none;
        margin: 40px auto;
    }
}

Đó là tất cả. Tôi hy vọng, bây giờ bạn có thể tạo hộp thông báo bằng mũi tên. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào liên quan đến hộp thông báo này, hãy cho tôi biết bằng cách bình luận bên dưới

Làm cách nào để tạo một mũi tên trong HTML?

Làm cách nào để thêm mũi tên vào div trong CSS?

Làm cách nào để tạo mũi tên tooltip bằng CSS?