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

    肯定是大叔,本来以为用加法做乘法,后来想想这样麻烦,还是可以使用乘法的,按位乘,ov可以看成不止一位,程序如下所示: #include <stdio.h> #define MAX 4000 ...

  2. WCF - Self Hosting

    WCF - Self Hosting Here, the WCF service is hosted in a console application. Given below is the proc ...

  3. CSS选择器一览

    CSS选择器一览 CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还 ...

  4. spring的事件机制

    事件机制作为一种编程机制,在许多语言中都提供了支持.JAVA语言也不例外,java中的事件机制的参与者有3种角色: 1.event object 2.event source 3.event list ...

  5. FreeBSD方式安装 MAC OSX

    首先你的电脑需要支持硬件虚拟化,可以用securable进行检测,如图所示即为支持,说明可以再你电脑的虚拟机里面安装苹果系统,如果有其中一项为NO,那么不好意思,你就没法安装了 2 其次你的电脑要提前 ...

  6. ☀【JS】Code

    1 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf- ...

  7. 宣布正式发布 Azure 媒体服务内容保护服务

    Mingfei Yan Azure媒体服务项目经理 我们非常高兴地宣布正式发布 Azure 媒体服务内容保护服务.这包括 Microsoft PlayReady许可服务和 AES明文密钥交付服务!此外 ...

  8. Google Chrome中的高性能网络 (三)

    使用预连接优化了TCP连接管理 已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作.为什么再进一步连接到目标主机,在用户真正发起请求前完成TC ...

  9. Shell获取文件后缀名

    file = "thisfile.txt" echo "filename: ${file%.*}" echo "extension: ${file## ...

  10. The Task: Events, Asynchronous Calls, Async and Await

    The Task: Events, Asynchronous Calls, Async and Await Almost any software application today will lik ...