视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用css实现的效果（支持ie6,7哦）

<style>

 /*border实现三角*/

    /*箭头向上*/

    .arrow-top{

         width       : 0;

         height      : 0;

         font-size   : 0;

         line-height : 0;

         border-left: 5px dashed transparent;

         border-right: 5px dashed transparent;

         border-bottom: 5px solid red;

    }

    /*箭头向下*/

    .arrow-bottom{

            width       : 0;

            height      : 0;

            font-size   : 0;

            line-height : 0;

            border-left: 5px dashed transparent;

            border-right: 5px dashed transparent;

            border-top: 5px solid red;

    }

    /*箭头向右*/

    .arrow-right{

        width       : 0;

        height      : 0;

        font-size   : 0;

        line-height : 0;

        border-bottom: 5px dashed transparent;

        border-top: 5px dashed transparent;

        border-left: 5px solid red;

    }

    /*箭头向左*/

    .arrow-left{

        width       : 0;

        height      : 0;

        font-size   : 0;

        line-height : 0;

        border-bottom: 5px dashed transparent;

        border-top: 5px dashed transparent;

        border-right: 5px solid red;

    }

</style>

来看看整体html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>border实现三角</title>

    <style>

        /*border实现三角*/

        /*箭头向上*/

        .arrow-top{

            width       : 0;

            height      : 0;

            font-size   : 0;

            line-height : 0;

            border-left: 5px dashed transparent;

            border-right: 5px dashed transparent;

            border-bottom: 5px solid red;

        }

        /*箭头向下*/

        .arrow-bottom{

            width       : 0;

            height      : 0;

            font-size   : 0;

            line-height : 0;

            border-left: 5px dashed transparent;

            border-right: 5px dashed transparent;

            border-top: 5px solid red;

        }

        /*箭头向右*/

        .arrow-right{

            width       : 0;

            height      : 0;

            font-size   : 0;

            line-height : 0;

            border-bottom: 5px dashed transparent;

            border-top: 5px dashed transparent;

            border-left: 5px solid red;

        }

        /*箭头向左*/

        .arrow-left{

            width       : 0;

            height      : 0;

            font-size   : 0;

            line-height : 0;

            border-bottom: 5px dashed transparent;

            border-top: 5px dashed transparent;

            border-right: 5px solid red;

        }

    </style>

</head>

<body>

<div>

    <span>店铺信息</span>

    <span class="arrow-right" style="display: inline-block;"></span>

    <span class="arrow-left" style="display: inline-block;"></span>

    <span class="arrow-top" style="display: inline-block;"></span>

    <span class="arrow-bottom" style="display: inline-block;"></span>

</div>

</body>

</html>

css制作小三角的更多相关文章

  1. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  2. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  3. CSS制作小旗子与小箭头

    CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...

  4. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  5. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  6. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  7. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  8. css制作倒三角

    布局div,并命名为id="dropdown",在style使用border属性对div进行控制 #dropdown{ width:0px; height:0px; border- ...

  9. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

随机推荐

  1. Android开发UI之Navigation Drawer

    http://blog.csdn.net/xyz_lmn/article/details/12523895

  2. linux下的X server:linux图形界面原理

    linux下的X server:linux图形界面原理   Moblin Core是在Gnome Mobile的平台上建立.我以前玩Linux,提交的都和图像没有关系,连Xwindows都不用启动,开 ...

  3. [HDU 1254] 推箱子

    推箱子 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  4. AFNetworking 2.0 获取json数据时,返回 NSLocalizedDescription=Request failed: unacceptable content-type: text/html, 解决方法.

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; manager.responseSe ...

  5. javascript点击图片放大的功能（原生）

    使用的图片: 1.jpg <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  6. lua与C/C++交互

    Lua设计小巧很容易与C/C++进行交互,下面我们具体讲解C/C++中如何调用lua,而lua中又如何调用C代码. 首先lua和C交互的一个重要的数据结构lua_State,它是进行数据交换的堆栈,按 ...

  7. HDU 4746 Mophues 莫比乌斯反演

    分析: http://blog.csdn.net/acdreamers/article/details/12871643 分析参见这一篇 http://wenku.baidu.com/view/fbe ...

  8. HDU5668 Circle 非互质中国剩余定理

    分析:考虑对给定的出圈序列进行一次模拟,对于出圈的人我们显然可以由位置,编号等关系得到一个同余方程 一圈做下来我们就得到了n个同余方程 对每个方程用扩展欧几里得求解,最后找到最小可行解就是答案. 当然 ...

  9. cloudstack安装篇2-主机名配置

    CloudStack要求正确配置主机名.在默认情况下,安装完操作系统后,主机名是localhost.localdomain.运行下面的命令来测试: hostname --fqdn 在此处将返回这样的结 ...

  10. Java 线程池架构原理和源码解析(ThreadPoolExecutor)

    在前面介绍JUC的文章中,提到了关于线程池Execotors的创建介绍,在文章:<java之JUC系列-外部Tools>中第一部分有详细的说明,请参阅: 文章中其实说明了外部的使用方式,但 ...