上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法

http://blog.csdn.net/zhouzme/article/details/18901943

，但没有怎么用上，也没有详细完整的实例，今天刚好要用上，整理了下，写个完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.area {

    margin:100px auto;

    width:300px;

    height: 150px;

}

.item {

    float:left; clear:both;

    margin-bottom:23px;

}

/* 向上的箭头 */

.dot-top {

    font-size: 0;

    line-height: 0;

    border-width: 10px;

    border-color: red;

    border-top-width: 0;

    border-style: dashed;

    border-bottom-style: solid;

    border-left-color: transparent;

    border-right-color: transparent;

}

/* 向右的箭头 */

.dot-right {

    font-size: 0;

    line-height: 0;

    border-width: 10px;

    border-color: red;

    border-right-width: 0;

    border-style: dashed;

    border-left-style: solid;

    border-top-color: transparent;

    border-bottom-color: transparent;

}

/* 向下的箭头 */

.dot-bottom {

    font-size: 0;

    line-height: 0;

    border-width: 10px;

    border-color: red;

    border-bottom-width: 0;

    border-style: dashed;

    border-top-style: solid;

    border-left-color: transparent;

    border-right-color: transparent;

}

/* 向左的箭头 */

.dot-left {

    font-size: 0;

    line-height: 0;

    border-width: 10px;

    border-color: red;

    border-left-width: 0;

    border-style: dashed;

    border-right-style: solid;

    border-top-color: transparent;

    border-bottom-color: transparent;

}

</style>

</head>

<body>

<div class="area">

    <span class="item dot-top"></span>

    <span class="item dot-right"></span>

    <span class="item dot-bottom"></span>

    <span class="item dot-left"></span>

</div>

</body>

</html>

可以通过设置 border-width 来调整箭头的大小，这样就不需要每次都去做图了，非常方便，颜色可以随时调整，真佩服那位老兄，以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了



显示结果图：

纯 CSS 实现三角形尖角箭头的实例的更多相关文章

  1. 利用纯css写三角形，弧度箭头，吃豆人，气泡。放大镜，标签的源码

    1. 向上三角形

  2. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  5. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  6. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  7. 【面试题】纯css实现三角形，你知道如何实现吗？

    纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <di ...

  8. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  9. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

随机推荐

  1. 点击某一按钮新增click，并切换页面

    应用场景:对于web端接收手机验证码的处理方法:1.如果有权限可以通过查询数据库来获得手机验证码,方便快捷.2.如果后台系统保存了手机验证码,可以去后台获取验证码,然后填写到前台页面,此方法有两种处理 ...

  2. [DL学习笔记]从人工神经网络到卷积神经网络_3_使用tensorflow搭建CNN来分类not_MNIST数据(有一些问题)

    3:用tensorflow搭个神经网络出来 为什么用tensorflow呢,应为谷歌是亲爹啊,虽然有些人说caffe更适合图像啊mxnet效率更高等等,但爸爸就是爸爸,Android都能那么火,一个道 ...

  3. Git安装使用

    转载:http://www.open-open.com/lib/view/open1414396787325.html 1.window版地址 https://git-for-windows.gith ...

  4. js格式化时间为JSON格式 ajax提交 后台处理

    var effectRow = new Object();if ($('#grd_infos').datagrid('getChanges').length) {    var update = $( ...

  5. Python基础知识学习_Day5

    一.生成器和迭代器 1.列表生成 >>> a [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] >>> a = map(lambda x:x+1, a ...

  6. java操作mongodb——插入数据

    在mongodb中,表(Table)被称之为集合(Collection),记录(Record)被称为文档(Document) 首先连接到数据库 MongoClient mongoClient = ne ...

  7. 通过Windows常见性能计数器分析服务器性能瓶颈

    转载 http://www.cnblogs./junzhongxu/archive/2011/02/15/1954889.html 监测对象 Ø System(系统) l %Total Process ...

  8. Unity 解决 An asset is marked with HideFlags.DontSave but is included in the build 问题。

    问题是:不能使用Unity使用的默认的字体.想要显示中文直接去下载一个字体.没必要使用默认的字体

  9. Python学习笔记——基础篇【第四周】——迭代器&生成器、装饰器、递归、算法、正则表达式

    目录 1.迭代器&生成器 2.装饰器 a.基本装饰器 b.多参数装饰器 3.递归 4.算法基础:二分查找.二维数组转换 5.正则表达式 6.常用模块学习 #作业:计算器开发 a.实现加减成熟及 ...

  10. OSI参考模型初识

    纪念我曾今热爱的数通(^o^). 1.osi参考模型 2.数据的封装和解封装 3.主机和主机间通信