Trang web này cung cấp một cách để tạo một div với một mũi tên chỉ ra bên ngoài. Đó là công cụ tôi đã sử dụng để tạo danh sách thả xuống cho DailySmarty, như thể hiện trong hình ảnh nổi bật
Đây là mã tôi đã sử dụng để triển khai tính năng này
Là nhà phát triển web, bạn có thể muốn tạo hình tam giác hoặc mũi tên cho trang web của mình. Có một số cách để đạt được điều này; . Không giống như hình ảnh, CSS rất nhẹ và sử dụng khá đơn giản. Hôm nay chúng ta sẽ xem cách tạo các mũi tên Lên, Xuống, Trái và Phải bằng CSS thuần túy
Ví dụ, nếu bạn muốn tạo một mũi tên hướng lên trên, thì bạn có ba cạnh; . Ý tưởng là sử dụng các đường viền trên phần tử HTML [tôi sẽ sử dụng div để giới thiệu]; . Vì vậy, làm cho một cái trong suốt và cái còn lại không trong suốt sẽ tạo ra một hình tam giác. Điều đó có nghĩa là bạn có thể dễ dàng điều chỉnh các đường viền khác nhau và đặt chiều cao/chiều rộng để có các hình dạng khác nhau chỉ theo các hướng khác nhau
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
Tìm hiểu cách tạo mũi tên bằng CSS
Mũi tên bên phải
mũi tên trái
Mũi tên lên
mũi tên xuống
Bước 1] Thêm HTML
Thí dụ
Mũi tên bên phải
mũi tên trái
Mũi tên lên
mũi tên xuống
Bước 2] Thêm CSS
Thí dụ
mũi tên {
biên giới. chất rắn màu đen;
chiều rộng biên giới. 0 3px 3px 0;
trưng bày. chặn Nội tuyến;
đệm. 3px;
}
đúng {
biến đổi. xoay[-45deg];
-webkit-biến đổi. xoay[-45deg];
}
bên trái {
biến đổi. xoay [135 độ];
-webkit-biến đổi. xoay [135 độ];
}
lên {
biến đổi. xoay[-135deg];
-webkit-biến đổi. xoay[-135deg];
}
xuống {
biến đổi. xoay [45 độ];
-webkit-biến đổi. xoay [45 độ];
}
Tự mình thử »
Bạn có thể đã nhìn thấy các mũi tên trên một trang web hướng dẫn bạn tiếp tục cuộn xuống trang sau khi bạn hoàn thành một phần. Đây là những yếu tố phong cách đơn giản, siêu hiệu quả giúp tạo ra luồng nội dung của bạn
Nếu bạn đang cố gắng tìm ra cách tạo ra những yếu tố đó hoặc bạn đang tìm cách thu hút sự chú ý của mọi người vào thông tin khác, hãy làm theo hướng dẫn ngắn này
Có thể bạn sẽ mất 5 - 10 phút để tìm hiểu cách thức hoạt động của nó và nó tốt cho việc gì để bạn không lãng phí thời gian của mình
Bạn sẽ chỉ cần HTML và CSS để tạo phần tử này
HTML rất đơn giản. Tất cả những gì bạn cần là một phần tử div có tên lớp. Đây là những gì nó trông giống như
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đó là nó cho HTML. Bây giờ là lúc để xem CSS, đây là nơi bạn phải thông minh
Phong cách dành cho. lớp mũi tên dưới đủ dễ viết
.bottom-arrow {
border-bottom: 5px solid #6A0136;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Cách bạn tạo mũi tên là nơi nó trở nên thú vị. Trước tiên, bạn sẽ bắt đầu bằng cách sử dụng bộ chọn lớp giả,. sau đó
Bên trong bộ chọn, bạn cần đặt giá trị cho thuộc tính nội dung. Một chuỗi rỗng là tốt nếu bạn không có bất kỳ văn bản nào bạn muốn hiển thị
Sau đó, bạn phải đặt giá trị vị trí để mũi tên nằm ở đường viền dưới cùng mà bạn đã đặt cho div. Nếu không đặt giá trị này, mũi tên của bạn sẽ không hiển thị ở nơi bạn nghĩ. Đi trước và xem cho chính mình
Tiếp theo, bạn sẽ muốn sử dụng thuộc tính lề để căn giữa mũi tên trên div. Bạn cũng có thể sử dụng lề để đặt mũi tên lệch khỏi tâm nếu điều đó phù hợp hơn với thiết kế của bạn
Sau đó, hãy tiếp tục và đặt thuộc tính chiều cao và chiều rộng thành 0. Lý do bạn muốn làm điều này là vì nếu bạn cho mũi tên có chiều rộng, nó sẽ không giống mũi tên trừ khi bạn thực hiện một số phép thuật CSS điên rồ. Chiều cao không nhất thiết phải được đặt thành 0 miễn là chiều rộng, nhưng làm như vậy sẽ giúp bạn tránh những bất ngờ về bố cục khó chịu sau này
Điều cuối cùng bạn phải làm là đặt một số thuộc tính đường viền. Bạn sẽ cần đặt thuộc tính border-top. Đây là cách bạn sẽ đặt chiều cao và màu sắc cho mũi tên của mình
Tiếp theo, bạn cần đặt thuộc tính border-left và border-right. Chúng kiểm soát chiều rộng của mũi tên của bạn. Một điều thú vị ở đây là bạn không đặt màu cho các thuộc tính border-left và border-right. Chúng cần được đặt thành trong suốt vì chúng chịu trách nhiệm tạo mũi tên
Hãy coi thuộc tính border-left và border-right giống như việc cắt một hình tam giác ra khỏi hộp và đó chính xác là những gì đang xảy ra
Đây là mã CSS mà chúng ta đã nói đến
.bottom-arrow:after {
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
nó không quá tệ. Bạn chỉ cần biết CSS hoạt động như thế nào và nó có thể được thao tác như thế nào. Có thể có 100 cách khác để làm điều tương tự, nhưng đây là cách tôi đã tìm ra cách thực hiện
Làm cách nào để thêm mũi tên vào div trong CSS?
Trước tiên, bạn sẽ bắt đầu bằng cách sử dụng bộ chọn lớp giả,. sau đó. Bên trong bộ chọn, bạn cần đặt giá trị cho thuộc tính nội dung. Một chuỗi rỗng là tốt nếu bạn không có bất kỳ văn bản nào bạn muốn hiển thị. Sau đó, bạn phải đặt giá trị vị trí để mũi tên nằm ở đường viền dưới cùng mà bạn đã đặt cho div
Làm thế nào để tạo một tam giác div?
Cách tiếp cận. Để tạo tam giác, trong phần HTML, chúng ta chỉ cần thêm một div cho mỗi tam giác . Khái niệm này là tạo một hộp không có chiều rộng hoặc chiều cao. Chiều rộng của đường viền xác định chiều rộng và chiều cao thực tế của Tam giác.
Làm cách nào để vẽ một mũi tên trong HTML?
Có ba phương pháp để thêm mũi tên trong HTML. số thực thể.
. Mũi tên bên phải