魔工坊

泰特

Web工程师


发布者资料

  • 性别: 帅哥
  •  地区: 芬兰
  • 日期: 2015-09-21 10:48:16

教程标签云


教程分类


推荐教程


同类教程

4896

纯CSS实现箭头、气泡,让提示功能具有三角形图标


CSS2边框方案:

 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; 
}

CSS3伪类方案:

div.tooltip:before, div.tooltip:after { 
content:   
height: 0; 
position: absolute; 
width: 0; 
border: 10px solid transparent;  
} 
 
 
div.tooltip:before { 
border-bottom-color: #fff;  
 
position: absolute; 
top: -19px; 
left: 255px; 
z-index: 2; 
} 
 
div.tooltip:after { 
border-bottom-color: #333;  
 
position: absolute; 
top: -24px; 
left: 255px; 
z-index: 1; 
}

完整Demo

<!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>

是不是很实用啊!

浏览演示

喵,赏1块零钱,给我家喵星人买罐头吧 :)

赞赏支付方式:

赞赏

赞赏

赞赏

 

[ 教程搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

魔友吐槽

浏览上篇

浏览下篇

发布教程

魔工坊系统提示