那些遇到过的问题

相关疑难解决方法(0)

如何使用纯CSS创建"工具提示尾部"？

我刚刚遇到了一个巧妙的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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

这会产生一个小箭头/三角形效果,一个"工具提示尾巴".这让我大吃一惊!我真的很想知道它是如何工作的？!

此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:

在此输入图像描述

这是一个有趣的问题.这可以仅使用CSS来完成,暂时忽略阴影吗？

更新1

我想出了我最初问题的解决方案.这是小提琴......

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff …
Run Code Online (Sandbox Code Playgroud)

css tooltip css3 css-shapes

Hri*_*sto
2015 12-14
89
推荐指数
5
解决办法
5万
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

tooltip ×1