视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用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. hdu4655Cut Pieces

    http://acm.hdu.edu.cn/showproblem.php?pid=4655 先以最大的来算为 N*所有的排列数  再减掉重复的 重复的计算方法:取相邻的两个数的最小值再与它前面的组合 ...

  2. 修改tomcat的部署名称

    找到指定工程下面的.setting目录下面的org.eclipse.wst.common.component文件,可以看到以下的配置 <?xml version="1.0" ...

  3. C#中的cookie编程

    Cookie就是所谓的" 小甜饼" ,他最早出现是在Netscape Navigator 2.0中.Cookie其实就是由Web服务器创建的.将信息存储在计算机上的文件.那么为什么 ...

  4. eclipse 修改设置Ctrl+Shift+F长度

    在window的Preferences中的Java->Code Style->Formatter 到了这一步就是找到Ctrl+Shift+F的格式化模板了,这里不能直接修改.因为是ecli ...

  5. 一步步写STM32 OS【四】OS基本框架

    一.上篇回顾 上一篇文章中,我们完成了两个任务使用PendSV实现了互相切换的功能,下面我们接着其思路往下做.这次我们完成OS基本框架,即实现一个非抢占式(已经调度的进程执行完成,然后根据优先级调度等 ...

  6. HDU4725 The Shortest Path in Nya Graph dij

    分析:对于每一层,原来n个点,然后扩展为原来的三倍,每一层扩展一个入点,一个出点,然后跑最短路 注:tmd我把一个n写成m了,然后wa了7次,我都要怀疑人生了 #include<cstdio&g ...

  7. bzoj 1875 [SDOI2009]HH去散步（矩乘）

    Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又因 ...

  8. iOS绘图教程 (转，拷贝以记录)

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,在翻译过程中我加入了一些书中没有涉及到的内容.希望本文能够对你有所帮助. 转自:http://www ...

  9. iptables/netfilter命令、实现及利用（转）

    原文链接:http://blog.csdn.net/sealyao/article/details/5934268 一.Netfilter和Iptables概述 netfilter/iptables ...

  10. 问题-[WIN8.132位系统]安装Win8.1 遇到无法升级.NET Framework 3.5.1

    问题现象:安装Win8后都遇到了无法升级.NET Framework 3.5.1的问题,在线升级会遇到错误0x800F0906.这使得91手机助手等很多软件无法运行,更郁闷的是,网上几乎所有的解决办法 ...