我刚刚发现了一个很好的CSS技巧。看看小提琴..。
.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>
这会创建一个类似箭头/三角形的小效果,一个“工具提示尾巴”。这让我大吃一惊!我真的很想知道它是如何工作的?!
此外,有没有一种方法可以扩展这个CSS技巧来创建如下效果:
这是一个有趣的问题。是否可以只使用CSS,暂时忽略阴影?
更新1
我想出了一个解决我最初问题的办法。这是小提琴..。
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;
}
现在,我如何使用纯CSS准确地模仿上面的小图片,包括阴影,并使其跨浏览器兼容?
更新2
下面是我的解决方案,综合了以下几个答案。我没有在多个浏览器上测试过它,但它在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;
}
发布于 2011-04-11 23:55:20
这是一个带有框阴影的示例,所有最新版本的浏览器都应该支持它
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:
body {font-family:Helvetica,Arial,sans-serif;}
#toolTip {
position:relative;
}
#toolTip p {
padding:10px;
background-color:#f9f9f9;
border:solid 1px #a0c7ff;
-moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
#tailShadow {
position:absolute;
bottom:-8px;
left:28px;
width:0;height:0;
border:solid 2px #fff;
box-shadow:0 0 10px 1px #555;
}
#tail1 {
position:absolute;
bottom:-20px;
left:20px;
width:0;height:0;
border-color:#a0c7ff transparent transparent transparent;
border-width:10px;
border-style:solid;
}
#tail2 {
position:absolute;
bottom:-18px;
left:20px;
width:0;height:0;
border-color:#f9f9f9 transparent transparent transparent;
border-width:10px;
border-style:solid;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
position: relative;
}
#toolTip p {
padding: 10px;
background-color: #f9f9f9;
border: solid 1px #a0c7ff;
-moz-border-radius: 5px;
-ie-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#tailShadow {
position: absolute;
bottom: -8px;
left: 28px;
width: 0;
height: 0;
border: solid 2px #fff;
box-shadow: 0 0 10px 1px #555;
}
#tail1 {
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-color: #a0c7ff transparent transparent transparent;
border-width: 10px;
border-style: solid;
}
#tail2 {
position: absolute;
bottom: -18px;
left: 20px;
width: 0;
height: 0;
border-color: #f9f9f9 transparent transparent transparent;
border-width: 10px;
border-style: solid;
}
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
发布于 2011-04-12 17:34:15
我只用一个div
元素做这个工具提示。
HTML:
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>
CSS:
.tooltip{
position: relative;
border: 1px solid #73a7f0;
width: 200px;
margin-left: 20px;
padding: 5px 14px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
-webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
content: ' ';
display: block;
position: absolute;
left: -8px;
top: 15px;
width: 14px;
height: 14px;
border-color: #73a7f0;
border-width: 1px;
border-style: none none solid solid;
background-color: #fff;
box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
-webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
-moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
解释:
我有一个普通的带有边框的div,就像其他例子一样。尾部是CSS的简单组合:
发布于 2011-04-11 23:47:14
不带阴影的工具提示
.abubble {
position: relative;
border: 1px solid #a0c7ff;
width: 100px;
height: 100px;
}
.ashadow {
position: absolute;
display: inline-block;
background: transparent;
width: 10px;
height: 10px;
left: 50px;
top: 100px;
-moz-box-shadow: 0px 10px 30px #000;
-webkit-box-shadow: 0px 10px 30px #000;
box-shadow: 0px 10px 30px #000;
}
.atail {
position: absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #a0c7ff transparent transparent transparent;
width: 0px;
height: 0px;
left: 30px;
top: 100px;
}
.atail2 {
position: relative;
display: inline-block;
border-width: 19px;
border-style: solid;
border-color: #fff transparent transparent transparent;
width: 0px;
height: 0px;
left: -19px;
top: -20px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
<div class="abubble">
<div class="atail">
<div class="atail2">
</div>
</div>
</div>
带有阴影的(在WebKit中看起来有点奇怪...我想我必须优化它):
.abubble {
position: relative;
border: 1px solid #a0c7ff;
width: 100px;
height: 100px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.ashadow {
position: absolute;
display: inline-block;
background: transparent;
width: 10px;
height: 10px;
left: -5px;
top: -16px;
-moz-box-shadow: 0px 10px 20px #000;
-webkit-box-shadow: 0px 10px 20px #000;
box-shadow: 0px 10px 20px #000;
}
.atail {
position: absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #a0c7ff transparent transparent transparent;
width: 0px;
height: 0px;
left: 30px;
top: 100px;
}
.atail2 {
position: relative;
display: inline-block;
border-width: 19px;
border-style: solid;
border-color: #fff transparent transparent transparent;
width: 0px;
height: 0px;
left: -19px;
top: -20px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
<div class="abubble">
<div class="atail">
<div class="ashadow"></div>
<div class="atail2">
</div>
</div>
</div>
https://stackoverflow.com/questions/5623072
复制相似问题