OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用纯CSS实现的箭头


分享到
分类 编程技巧   关键字 Html5   发布 newghost  1395378675000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3的东西。对浏览器支持良好。

基本原理

原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可理解:

一个梯形

当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形;

<div id="demo11"></div>

<style>
#demo11 {
  border: 10px solid #000;
  border-left-color: #f00;
  width: 10px;
  height: 10px;
}
</style>

一个三角形

当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。

<div id="demo12"></div>

<style>
#demo12 {
  border: 10px solid #000;
  border-left-color: #f00;
  width: 0;
  height: 0;
}
</style>

任意角度的三角形

改变各个边的宽度,即通过调整“边框”厚度可以配置出任意角度

<div id="demo14"></div>

<style>
#demo14 {
  border: 10px solid transparent;
  border-left: 20px solid #f00;
  width: 0;
  height: 0px;
}
</style>

通过伪元素实现

三角形可以通过伪元素绘制出,而无需改变原来的DOM结构

文字内容
<span id="demo15">文字内容</span>

<style>
#demo15{
  position: relative;
}
#demo15:after {
  border: 10px solid transparent;
  border-left: 10px solid #f00;
  width: 0;
  height: 0;
  position: absolute;
  content: ' '
}
</style>

伪元素实现三角线箭头

通过伪元素绘制出的两个,一个与背景色相同覆盖部分红色箭头,形成三角线

文字内容
<span id="demo15">文字内容</span>

<style>
#demo16{
  position: relative;
}
#demo16:after, #demo16:before {
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -20px;
  content: ' '
}

#demo16:before {
  border-left-color: #f00;
  right: -21px;
}
</style>

三角线分割的Tab页

  • 文字内容 Tab1
  • 文字内容 Tab2
  • 文字内容 Tab3
<ul id="demo17">
  <li>文字内容 Tab1</li>
  <li>文字内容 Tab2</li>
  <li>文字内容 Tab3</li>
</ul>

<style>
#demo17{
  font-size: 10px;
  height: 24px;
}

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

#demo17 li:after, #demo17 li:before {
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -18px;
  content: ' '
}

#demo17 li:before {
  border-left-color: #ddd;
  right: -19px;
}
</style>

三角形跟矩形组合成提示框

这里还有另一种效果,使用三角形跟矩形组合成提示框,代码来自这篇文章: Css arrows and shapes without markup


<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-left-color: #ccc;
  top: 15px;
}

#demo:before {
  border-width: 14px;
  border-left-color: #333;
  top: 10px;
}
</style>
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JSON为王,为什么XML会慢慢淡出人们的视野
  2. 为什么你写的Python运行的那么慢呢?
  3. 什么是最好的编程语言?(怎样才能爱上编程呢?)
  4. 该不该闭合这些元素?曾经〈br/〉的写法是错误的
  5. 使用简单的JavaScript,我们为什么应该抵制ES6
  6. 我们抛弃了AngularJS:单页面应用的5大缺陷
  7. 如何雇佣杰出的外包程序员
  8. 快乐Node程序员的10个习惯
  9. HTML5版Flappy Bird,虐心游戏你能过几关
  10. 图解Node.js流行趋势,Node在路上
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. 使用Javascript将相对路径地址转换为绝对路径
  2. 该不该闭合这些元素?曾经〈br/〉的写法是错误的
  3. for in 比for loop慢至少20倍
  4. 停止使用循环,教你用underscore优雅的写代码
  5. 不到30行JS代码实现的Excel表格,jQuery并非不可替代
  6. 如何在网页上隐藏你的Email邮件地址
  7. Ruby己死?NodeJS能否取代Ruby?
  8. 永远不要在Linux执行的10个最危险的命令
  9. 代码审查:写出好的 commit message
  10. 性能测评:Ngix_Lua, Node.JS Python三者性能相当,均比php快近一倍

 关键字 - Html5
  1. 让Select选择框可编辑可输入可自动补全可下拉选择
  2. 创造canvas的艺术
  3. 用纯CSS实现的箭头
  4. HTML5的TCP和UDP Web Socket API草案定稿
  5. 传统广告与H5广告的差别在哪里?
  6. WeMall微信商城源码插件代金券部分代码
  7. WeMall微信商城源码插件会员卡代码详情
  8. WeMall微信商城源码插件大转盘代码详情
  9. 你应该使用HTML5的header和footer标签吗?
  10. 5个实用Web界面设计工具 | 附开发案例

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号