Tôi vừa xem qua một thủ thuật CSS gọn gàng. Kiểm tra các fiddle ...
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}<div>Cool Trick:
<br />
<div class="tooltiptail"></div>
</div>
<br />
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>Điều này tạo ra một hiệu ứng giống như mũi tên / tam giác nhỏ, một "đuôi chú giải công cụ". Điều này làm tôi suy nghĩ! Tôi thực sự muốn biết nó hoạt động như thế nào ?!
Hơn nữa, có cách nào để mở rộng thủ thuật CSS này để tạo hiệu ứng như sau:
Đây là một vấn đề thú vị. Có thể thực hiện điều này chỉ bằng cách sử dụng CSS, bỏ qua bóng đổ ngay bây giờ không?
CẬP NHẬT 1
Tôi đã tìm ra giải pháp cho câu hỏi ban đầu của mình. Đây là trò chơi ...
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>CSS
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.tooltiptail2 {
display: block;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 18px;
width: 0px;
height: 0px;
position: relative;
left: 4px;
top: -38px;
}Bây giờ, làm cách nào để bắt chước chính xác bức ảnh nhỏ ở trên bằng cách sử dụng CSS thuần túy, bao gồm cả bóng và để nó tương thích với nhiều trình duyệt?
CẬP NHẬT 2
Đây là giải pháp của tôi sau khi kết hợp các câu trả lời bên dưới. Tôi chưa thử nghiệm nó trên nhiều trình duyệt, nhưng nó trông rất tuyệt trong Chrome.
http://jsfiddle.net/UnsungHero97/MZXCj/688/
HTML
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>CSS
#toolTip {
background-color: #ffffff;
border: 1px solid #73a7f0;
width: 200px;
height: 100px;
margin-left: 32px;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px -1px black;
-moz-box-shadow: 0px 0px 8px -1px black;
-webkit-box-shadow: 0px 0px 8px -1px black;
}
#toolTip p {
padding:10px;
}
#tailShadow {
background-color: transparent;
width: 4px;
height: 4px;
position: absolute;
top: 16px;
left: -8px;
z-index: -10;
box-shadow: 0px 0px 8px 1px black;
-moz-box-shadow: 0px 0px 8px 1px black;
-webkit-box-shadow: 0px 0px 8px 1px black;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #73a7f0 transparent transparent;
position:absolute;
top: 8px;
left: -20px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -18px;
top: 8px;
}
