Trình tạo mũi tên công cụ css

Chú giải công cụ CSS xuất hiện khi người dùng di chuyển chuột qua một phần tử hoặc khi người dùng chạm vào phần tử đó bằng thiết bị di động

Mã nguồn demo. TRÊN PHẢI DƯỚI TRÁI

Trình tạo mã này không bao gồm tất cả các cấu hình kiểu và Html. Bạn có thể dễ dàng tinh chỉnh thêm dựa trên mã được tạo hoặc tham khảo Mã nguồn demo được liệt kê ở trên để biết thêm các biến thể

Đặt trống nếu không yêu cầu hiệu ứng đường viền bóng hộp

Nếu được chọn, nó sẽ sử dụng thuộc tính độ mờ, khả năng hiển thị và chuyển đổi CSS để chuyển đổi chú giải công cụ

Nếu không, nó sẽ sử dụng thuộc tính hiển thị ("none" hoặc "block") để bật và tắt chú giải công cụ

Bạn cũng có thể cân nhắc sử dụng Chú giải công cụ JavaScript của chúng tôi

Css Tooltip đơn giản và được coi là thỏa đáng trong hầu hết các trường hợp. Tuy nhiên, có những lúc những hạn chế của nó đang trở nên rõ ràng.

Hạn chế của nó có thể được giải quyết bằng cách sử dụng Chú giải công cụ JavaScript của chúng tôi

Các tính năng Chú giải công cụ CSS Chú giải công cụ Javascript Sự kiện mở Di chuột qua (hoặc nhấn bằng thiết bị di động)

Có thể được định cấu hình cho bất kỳ sự kiện máy khách nào như onclick, onmouseover, onfocus, v.v.

Nhấp vào tôi Mã

Khả năng truy cập Nội dung (chẳng hạn như liên kết) trong chú giải công cụ không thể truy cập được

Hoàn toàn có thể truy cập. Chú giải công cụ sẽ ở lại khi di chuyển chuột từ phần tử đích sang chú giải công cụ. ví dụ

• Tiêu chuẩn
• dính
• Rất Dính

Click me

Tôi đã được định cấu hình là {sticky. true}
Bạn có thể đóng tôi bằng cách nhấp vào các khu vực trang khác.

Tôi đã được định cấu hình là {sticky. 1}

Tôi chỉ có thể đóng bằng cách nhấp vào nút đóng

Truy cập Tùy chọn chú giải công cụ JavaScript để biết thêm chi tiết

Nội dung chú giải công cụ được khai báo trong tập lệnh, chẳng hạn như.

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

0

Một phần tử và phần tử bên trongHTML của nó trong trang, chẳng hạn như

......

sẽ được sử dụng làm nội dung chú giải công cụ.

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

1

Thông thường những yếu tố đó được đặt bên trong một màn hình. không có trình bao bọc

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

2

Vì vậy, những nội dung chú giải công cụ đó không hiển thị trừ khi được yêu cầu

Chú giải công cụ có thể được điền bằng nội dung được tìm nạp từ các tệp bên ngoài, chẳng hạn như tài liệu văn bản, tài liệu XML hoặc các trang web khác

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

Mã số

    
Freetuts.net hướng dẫn tạo các dấu mũi tên
    
Right arrow: 
    
Left arrow: 
    
Up arrow: 
    
Down arrow: 

Các thành phần này 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. Add CSS for interface

Chúng ta đã có cá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 kiểu thẻ

.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ể tùy 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 viền cho thẻ i, tuy nhiên chỉ tạo 2 cạnh của viền, sau khi tạo ta sẽ nhận được một biểu tượng là 2 cạnh của hình vuông
• Tiếp đến, ta sẽ sử dụng thuộc tính transform để xoay biểu tượng trên các dấu phù hợp

Time of you run 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 mũi tên bằng CSS. Hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn trong quá trình xây dựng website

• Tham khảo thêm

• Hoạt ảnh CSS tài liệu Hoạt ảnh CSS
• Dải màu CSS tài liệu Dải màu CSS
• Chuyển tiếp tài liệu trong CSS Chuyển tiếp trong CSS
• doc Chú giải công cụ trong CSS Chú giải công cụ trong CSS
• doc CSS Flexbox CSS Flexbox
• doc Loại phương tiện trong CSS Loại phương tiện trong CSS
• Chuyển đổi tài liệu 2D trong CSS Chuyển đổi 2D trong CSS
• Chuyển đổi tài liệu 3D trong CSS Chuyển đổi 3D trong CSS
• Giao diện người dùng doc trong CSS Giao diện người dùng trong CSS
• doc Qui tắc @page trong CSS Qui tắc @page trong CSS

37

Mới. Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm. Tìm hiểu thêm.
Tìm hiểu thêm.

Làm thế nào để tạo một hộp có mũi tên trong CSS?

Làm tròn góc là dễ dàng. Nhưng bất kỳ ý tưởng nào để làm cho mũi tên ở bên trái mà không sử dụng hình ảnh

Can't doing for could with

Only a element

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

9

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

____4

Stewartside

19. 7K12 Huy hiệu vàng62 Huy hiệu bạc76 Huy hiệu đồng12 Huy hiệu vàng62 Huy hiệu bạc76 Huy hiệu đồng12 Huy hiệu vàng62 Huy hiệu bạc76

Hỏi ngày 7 tháng 8 năm 2011 lúc 10. 30 Tháng tám 7, 2011 lúc 10. 30 7 tháng 8, 2011 lúc 10. 30

Jitendra Vyasjitendra VyasJitendra Vyas Jitendra Vyas

Huy hiệu vàng 144K225563 Huy hiệu bạc841 Huy hiệu đồng225 huy hiệu vàng563 huy hiệu bạc841 huy hiệu đồng225 huy hiệu vàng563 huy hiệu bạc841 bronze badges

3

Như thế này

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Bản demo. http. //jsfiddle. mạng/sparkup/edjdxjf2/ http. //jsfiddle. mạng/sparkup/edjdxjf2/ http. //jsfiddle. mạng/sparkup/edjdxjf2/

CẬP NHẬT

Nó cũng có thể đạt được mà không cần các phần tử trống với thuộc tính CSS

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

0

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

Bản demo. http. //jsfiddle. net/sparkup/y89f1te0/. http. //jsfiddle. net/sparkup/y89f1te0/. http. //jsfiddle. net/sparkup/y89f1te0/

hy vọng nó sẽ giúp

Đã trả ngày 7 tháng 8 năm 2011 lúc 10. 37Ngày 7 tháng 8 năm 2011 lúc 10. 37 7 tháng 8, 2011 lúc 10. 37

5

Standard tool

Nếu bạn muốn một mũi tên đơn giản, thì bạn có thể thêm phần tử giả vào

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

1

câu đố 1

---

Sharp Tool Tool

Nếu bạn muốn một cạnh phẳng cho mũi tên, hãy thử điều này. cạnh phẳng cho mũi tên, hãy thử điều này. cạnh phẳng cho mũi tên, hãy thử điều này