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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. .area {
  8.     margin:100px auto;
  9.     width:300px;
  10.     height: 150px;
  11. }
  12. .item {
  13.     float:left; clear:both;
  14.     margin-bottom:23px;
  15. }
  16. /* 向上的箭头 */
  17. .dot-top {
  18.     font-size: 0;
  19.     line-height: 0;
  20.     border-width: 10px;
  21.     border-color: red;
  22.     border-top-width: 0;
  23.     border-style: dashed;
  24.     border-bottom-style: solid;
  25.     border-left-color: transparent;
  26.     border-right-color: transparent;
  27. }
  28. /* 向右的箭头 */
  29. .dot-right {
  30.     font-size: 0;
  31.     line-height: 0;
  32.     border-width: 10px;
  33.     border-color: red;
  34.     border-right-width: 0;
  35.     border-style: dashed;
  36.     border-left-style: solid;
  37.     border-top-color: transparent;
  38.     border-bottom-color: transparent;
  39. }
  40. /* 向下的箭头 */
  41. .dot-bottom {
  42.     font-size: 0;
  43.     line-height: 0;
  44.     border-width: 10px;
  45.     border-color: red;
  46.     border-bottom-width: 0;
  47.     border-style: dashed;
  48.     border-top-style: solid;
  49.     border-left-color: transparent;
  50.     border-right-color: transparent;
  51. }
  52. /* 向左的箭头 */
  53. .dot-left {
  54.     font-size: 0;
  55.     line-height: 0;
  56.     border-width: 10px;
  57.     border-color: red;
  58.     border-left-width: 0;
  59.     border-style: dashed;
  60.     border-right-style: solid;
  61.     border-top-color: transparent;
  62.     border-bottom-color: transparent;
  63. }
  64. </style>
  65. </head>
  66.  
  67. <body>
  68. <div class="area">
  69.     <span class="item dot-top"></span>
  70.     <span class="item dot-right"></span>
  71.     <span class="item dot-bottom"></span>
  72.     <span class="item dot-left"></span>
  73. </div>
  74. </body>
  75. </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. 开发人员如何上google查资源，如果浏览国外资源方法

    启动浏览器后15秒左右,浏览器的右上角就会出现图标 启用防火墙功能(右上角墙形图标),这时候程序就会去寻找网上代理,从而达到访问GOOGLE的效果,提示如果不访问google网站,可再点击一下关闭防火 ...

  2. vue-auto-focus: 控制自动聚焦行为的 vue 指令

    在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为.例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订 ...

  3. 《Django By Example》第六章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:无他,祝大家年会都中奖!) 第六章 ...

  4. python 函数简介之三

    1. 非固定个数的实参----参数组,* args ,其结果将以元组的形式呈现出来 def func(*args): print(args) func(1,2,3,4,5) #第一种调用方式, 多个实 ...

  5. Nuget 学习一

    初识Nuget 对应C#开发的人员来说, DLL和相关的引用 并不陌生吧,通过手动拷贝DLL 存在很多问题, 比如SOA的实体DLL,开发者和使用者的DLL不一致,就可能存在字段的不一致, 通过Nug ...

  6. CodeForces 676D Theseus and labyrinth

    最短路. $dis[i][j][k]$记录到点$(i,j)$,门的状态为$k$时的最短路.转移的时候有$8$种方案,即直接走向周围四个点,或者进行旋转.比较烦的是判断两个相邻的点在状态$k$下是否连通 ...

  7. Base64encode

    一直以来Base64的加密解密都是使用sun.misc包下的BASE64Encoder及BASE64Decoder的sun.misc.BASE64Encoder/BASE64Decoder类.这个类是 ...

  8. mysql 的事务

    $conn = mysql_connect('localhost','root','root') or die ("数据连接错误!!!");mysql_select_db('tes ...

  9. 关于CGI、FastCGI和PHP-FPM的关系

    1.CGI是干嘛的? CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...

  10. 关于在mfc中cstring转为float和ini

    CString str1,str, str2; GetDlgItemText(IDC_EDIT1, str1); GetDlgItemText(IDC_EDIT2, str2); UINT value ...