时间:2016-01-22 07:27 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【纯CSS实现箭头、气泡让提示功能具有三角形图标】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
纯CSS实现箭头、气泡让提示功能具有三角形图标
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭头Demo</title>
<style type="text/css">
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-right: 10px solid yellow;
font-size: 0;
line-height: 0;
}
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-left: 60px solid green;
font-size: 0;
line-height: 0;
}
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -8px;
top: 20px;
content: '';
}
.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -6px;
top: 21px;
content: '';
}
</style>
</head>
<body>
<div id="contentHolder">
<h1>CSS 箭头Demo</h1>
<p>以下代码.是极好的纯 CSS 箭头样式，不使用背景图!</p>
<div id="position:relative;">
<div class="arrow-up">向上的箭头</div>
<div class="arrow-down">向下的箭头</div>
<div class="arrow-left">向左的箭头</div>
<div class="arrow-right">向右的箭头</div>
</div>
<h2>CSS 箭头气泡 ，使用 伪类(Pseudo-Element)</h2>
<div style="position:relative;">
<div class="tip">
企业级开发首选技术是什么？JavaEE和.Net哪个技术更好？在JavaEE开发中主要用哪些框架？另外在移动大热的趋势下如何开发出一个成功的Android产品？
</div>
<br/>
<div class="tip">
向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度
向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度
向上的箭头,类似于A,只有三个边，不能指定上边框
</div>
</div>
</div>
</body>
</html>
关于纯CSS实现箭头、气泡让提示功能具有三角形图标的相关讨论如下：
相关问题：易语言如何在托盘图标处弹出气泡，并且气泡箭头指...
答：.版本 2 .支持库 iext5 .子程序 __启动窗口_托盘事件 .参数 操作类型, 整数型 .如果真 (操作类型 ＝ 1) 气球提示框1.弹出提示框 (取鼠标水平位置 (), 取鼠标垂直位置 (), “煞爻”, -1, ) .如果真结束 >>详细
相关问题：CSS实现带箭头方框怎么控制箭头位置！
答：你可以做一个带箭头的div；然后样式如下： div { /* 箭头的样式，你自己设计，下面是旋转的样式*/ transform:rotate(90deg); -ms-transform:rotate(90deg); /* Internet Explorer */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-trans... >>详细
相关问题：怎么用css3来实现一个三角线的箭头呢？除了用两个...
答：div{ width: 20px; height: 20px; border: 2px solid #000; border-top: none; border-right: none; transform:rotate(45deg); } >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-