用CSS绘制箭头等三角形图案 [译]
最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。
当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。
幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我：CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。
不使用伪类的 CSS 代码如下:
/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */
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;
} /* 向下的箭头 类似于 V */
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;
}
其中的秘密，就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。
边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。如果加上旋转，不知道似的否可以指定各种不同方向的图形?
当然，这个处理方法优越的地方就在于代码量非常少，同时非常灵活。
带有 :before 和 :after 的CSS三角形
前面的例子可以很好的工作，但是如果你想要不只是一个三角形怎么办？比如气泡对话框，那么可以使用伪类来实现CSS三角形箭头，对于弹出的提示信息来说非常完美，代码如下：
div.tooltip {
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* 向上的箭头 */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */
/* positioning */
position: absolute;
top: -19px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
div.tooltip:after {
border-bottom-color: #333; /* arrow color */
/* positioning */
position: absolute;
top: -24px;
left: 255px;
z-index: 1;
}
一般来说在箭头的背面边框指定颜色，也可以只使用 :before 或者 :after 之中的一个。而第二个箭头，可以被当作背景边框，或者作为第一个的阴影。
我想问自己为什么不早点知道这种技术。这个优雅的技巧肯定会让我在将来大大的提高制作tooltip元素的水平，同时也为我打开了一个广阔的视野。
完整的页面示例代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭头Demo</title> <style type="text/css">
/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */
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;
} /* 向下的箭头 类似于 V */
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;
} /* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */
.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>
<br />
<div class="arrow-down">向下的箭头</div>
<br />
<div class="arrow-left">向左的箭头</div>
<br />
<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">
向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度<br />
向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度<br />
向上的箭头,类似于A,只有三个边，不能指定上边框
</div>
</div>
</div>
</body>
</html>
原文地址：http://davidwalsh.name/css-triangles
演示地址：http://davidwalsh.name/demo/css-triangles.php
用CSS绘制箭头等三角形图案 [译]的更多相关文章
- Css绘制箭头
IE6不支持transparent,因此上面的代码在IE6加一点处理透明的hack,修改后的代码如下 IE6下处理transparent border-left:100px solid trans ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- CSS绘制三角形和箭头，不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- CSS绘制三角形和箭头
<html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- CSS绘制三角形—border法
1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
随机推荐
- css3、html5学习笔记
2016/12/14 ----认真看完绝对对你有帮助 HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的 ...
- Git命令学习摘要
1.git init --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...
- jquery的hide()和show()
jquery用hide()和show()函数来控制html元素的显示和隐藏. hide()和show()都可以带参数的,hide(1000)表示隐藏所需的时间为1秒.此外还可以用slow,fast参数 ...
- 预习笔记 多态 --S2 4.3
第三章 多态 polymorphism 多态 instance 例子override 重载 constructor 构造器ClassCastException 类型转换异常upcasting 上抛 d ...
- Ansible学习笔记
一.Ansible简介 Ansible是一种agentless(基于ssh),可实现批量配置.命令执行和控制,基于Python实现的自动化运维工具. 其特性有: ①模块化:通过调用相关模块,完成指定任 ...
- lucene写索引出现锁文件的原因之一
lucene正常情况目录下的文件 有三个文件. segments.gen segments_a08, 还有一个类似 _uw.cfs名字的东西. 当然,不一定都一样, 但肯定是这三个. 如果出现了很多文 ...
- android添加第三方字体并设置的简单使用
1.java文件 package lpc.com.project006; import android.app.Activity; import android.content.res.AssetMa ...
- Python SQLAlchemy --3
本文為 Python SQLAlchemy ORM 一系列教學文: 刪除 學會如何查詢之後,就能夠進行後續的刪除.更新等操作. 同樣地,以幾個範例做為學習的捷徑. 123456789 user_1 = ...
- SAP 采购订单行项目中科目分配被隐藏,发现行项目设置中显示字段长度为0
1.sm30 维护 视图 TCVIEW 修改对应字段的显示长度
- 04-JAVA中的类和对象
1. Foo对构造函数进行了重载,那么默认的构造函数就不会被使用,在主类中,定义对象的时候,引用构造函数,却没有参数,自然无法通过编译. 2. 当设定字段初始值在初始化块前面的时候, 很明显使用了前者 ...