上次无意中发现了个使用纯 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. 从ASP.NET Web API 2 (C#)开始说起

    [译]Getting Started with ASP.NET Web API 2 (C#) 单击此处查看原文 HTTP不是单单为网页服务的,它更是一种用于构建API(用于暴露服务和数据)的强大平台. ...

  2. GMap学习笔记

    GMap学习笔记 1.GMap体系详解 What is the map control (GMapControl)? This is the control which renders the map ...

  3. oracle if else 判断

    CREATE OR REPLACE FUNCTION fn_GetClassifyBymxmjazfs (v_azfs varchar2,v_mx varchar2,v_mj varchar2) re ...

  4. nodejs中express安装失败解决方法

    http://jingyan.baidu.com/article/922554468a3466851648f419.html

  5. Egret --视觉编程，显示对象，事件

    1,在egret中,视觉图形都是由显示对象和显示对象容器组成的: 显示对象:准确的说,就是在舞台上显示出来的,包括能真实看见的图形,文字,图片,视频等:也包括不能看见但真实存在的显示对象容器: 一:显 ...

  6. NLog在MVC中使用

    NLog在MVC中使用 在site根目录新建NLog.config <?xml version="1.0"?> <configuration> <nl ...

  7. [MFC美化] Skin++使用详解-使用方法及注意事项

    主要分为以下几个方面: 1.Skin++使用方法 2.使用中注意事项 一. Skin++使用方法 SkinPPWTL.dll.SkinPPWTL.lib.SkinPPWTL.h ,将三个文件及相应皮肤 ...

  8. webservice(二)

    ---摘自网络,感谢提供者 WsExplorer和Tcp/Ip Monitor工具本身就存在于eclipse和MyEclipse中 使用工具的原因: 1.  使用工具可以更好的了解WebService ...

  9. idea新建项目文件名为红色的解决办法

    Perference->version Control ->Directory添加项目路径,vcs选<none> 即可.

  10. strut2配置文件属性介绍

    mystruts.xml配置文件属性介绍 1.package标签的中的namespace属性 <package name="default" extends="st ...