参见英文答案 >
Speech bubble with arrow2
我为这个问题创造了一个 jsFiddle.
我为这个问题创造了一个 jsFiddle.
a.tip { position: relative; } a.tip span { display: none; position: absolute; top: -5px; left: 60px; width: 125px; padding: 5px; z-index: 100; background: #000; color: #fff; -moz-border-radius: 5px; /* this works only in camino/firefox */ -webkit-border-radius: 5px; /* this is just for Safari */ } a:hover.tip { font-size: 99%; /* this is just for IE */ } a:hover.tip span { display: block; }
<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>
基本上我在我的网站上有一个工具提示,它显示在我的链接的右边.但是在黑匣子的左手边,我想要一个三角形附在指向链接的框上,是否可以使用CSS?就像这样,但在左边
解决方法
您可以使用CSS,使用
css triangle trick
a.tip span:before{ content:''; display:block; width:0; height:0; position:absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right:8px solid black; left:-8px; top:7px; }
原文地址:https://www.jb51.cc/css/217132.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。