视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用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. cocos2d-x 2.2 开发手记2

    终于搞定了  吧后面没写的补上 装完那一堆更新,再来运行原生的项目,嗯,看见 模拟器啦 oh,yeah~~ 额,开心早了,由于我的机器实在有点老了 内存只有可怜的 2GB 这在官方里面写的是不能运行 ...

  2. Embedding Documents in Word 2007 by Using the Open XML SDK 2.0 for Microsoft Office

    Download the sample code This visual how-to article presents a solution that creates a Word 2007 doc ...

  3. VS2010如何调试IIS上的网站

    通常,我们在Visual Studio里调试ASP.NET网站,都是加个断点,然后按F5,在VS自带的虚拟服务器下调试的.但有时候,VS自带的服务器弱爆了,无法满足一些特定情况的要求,我们必须把网站放 ...

  4. Go语言程序的状态监控 via 达达

    Go语言程序的状态监控 Go是很实在的编程语言,从一开始就提供了很详细的运行状态信息.产品上线后的调优和排查疑难杂症都得靠这些状态信息.这边总结一些我们项目里用到的状态监控手段. pprof Go自带 ...

  5. nand flash 和nor flash 区别

    NOR和NAND是现在市场上两种主要的非易失闪存技术.Intel于1988年首先开发出NOR flash技术,彻底改变了原先由EPROM和EEPROM一统天下的局面.紧接着,1989年,东芝公司发表了 ...

  6. NOIP2015 运输计划（二分+LCA+差分）

    4326: NOIP2015 运输计划 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 308  Solved: 208[Submit][Status] ...

  7. HDU 4622 Reincarnation（SAM）

    Problem Description Now you are back,and have a task to do:Given you a string s consist of lower-cas ...

  8. PHP邮箱验证是否有效

    今天一开电脑发现有人在我的主页给我乱留言,所以加了一个邮箱验证. 网上发现一个很巧妙的算法,分享一下: function checkmail($email){ $exp = "^[a-z'0 ...

  9. Eclipse的下载、安装和WordCount的初步使用（本地模式和集群模式）

    包括:    Eclipse的下载 Eclipse的安装 Eclipse的使用 本地模式或集群模式 Scala IDE for Eclipse的下载.安装和WordCount的初步使用(本地模式和集群 ...

  10. 用java面向对象的思想实现的汉诺塔问题

    package hanoi.com; public class Disc { private String name; private int level; public Disc(){ name = ...