codetc - 网站开发技术 首页 代码 CSS 查看内容

纯CSS实现的各种箭头

2014-11-8 14:34| 发布者: CODETC| 查看: 3962| 评论: 0

使用CSS绘制各种箭头,无需裁剪图片,对浏览器支持良好,使用方便简单。
CSS绘制箭头的基本原理是通过截取border(边框)的部分“拐角”实现,几行CSS代码即可。

绘制三角形
当元素宽、高为零,且其他边为透明颜色时,可以绘制一个三角形。
<div id="test1"></div>
<style>
#test1 {
  border: 10px solid transparent;
  border-left-color: #f00;
  width: 0;
  height: 0;
}
</style>
绘制任意角度的三角形
在上面例子中,通过调整不同“边框”颜色可以配置出任意角度
<div id="test2"></div>
<style>
#test2 {
  border: 10px solid transparent;
  border-bottom-color: #f00;
  /*
  border-left-color: #f00;
  border-right-color: #f00;
  border-top-color: #f00;
  */
  width: 0;
  height: 0px;
}
</style>
绘制梯形
当元素宽、高和边框的宽相近或相等时,改变某一边的颜色就可以看到一个梯形;
<div id="test4"></div>
<style>
#test4 {
  border: 10px solid #000;
  border-left-color: #f00;
  width: 10px;
  height: 10px;
}
</style>
通过伪元素实现
三角形也可以通过伪元素绘制,而无需改变原来的DOM结构
文字内容
<span id="test3">文字内容</span>
<style>
#test3{
  position: relative;
}
#test3:after {
  border: 8px solid transparent;
  border-left: 8px solid #f00;
  width: 0;
  height: 0;
  position: absolute;
  content: ' '
}
</style>
伪元素实现三角线箭头
通过伪元素绘制出的两个,一个与背景色相同覆盖部分红色箭头,形成三角线
文字内容
<span id="test5">文字内容</span>
<style>
#test5{
  position: relative;
}
#test5:after, #test5:before {
  border: 6px solid transparent;
  border-left: 6px solid #fff;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -15px;
  content: ' '
}
#test5:before {
  border-left-color: #f00;
  right: -16px;
}
</style>
使用三角线分割的Tab页
  • 文字内容 Tab1
  • 文字内容 Tab2
  • 文字内容 Tab3
<ul id="test6">
  <li>文字内容 Tab1</li>
  <li>文字内容 Tab2</li>
  <li>文字内容 Tab3</li>
</ul>
<style>
#test6{
  font-size: 10px;
  height: 24px;
}
#test6 li {
  float: left;
  position: relative;
  list-style: none;
  margin: 0 20px 12px -19px;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  padding-left: 12px;
}
#test6 li:after, #test6 li:before {
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -18px;
  content: ' '
}
#test6 li:before {
  border-left-color: #ddd;
  right: -19px;
}
</style>
绘制三角形和矩形组合成的提示框
这里还有另一种效果,使用三角形跟矩形组合成提示框

<div id="test7"></div>
<style>
#test7 {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}
#test7:after, #test7:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
}
#test7:after {
  border-width: 9px;
  border-left-color: #ccc;
  top: 15px;
}
#test7:before {
  border-width: 14px;
  border-left-color: #333;
  top: 10px;
}
</style> 

文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-40-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部