视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用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. 【转】Eclipse提示No java virtual machine(转载)

    原文网址:http://blog.sina.com.cn/s/blog_6cd73dfb01013zkg.html 第一次运行Eclipse,经常会提示下面的问题:... No java virtua ...

  2. MsoShapeType /InlineShape枚举

    指定形状的类型或形状范围. 名称 值 说明 msoAutoShape 1 自选图形. msoCallout 2 标注. msoCanvas 20 画布. msoChart 3 图. msoCommen ...

  3. zookeeper使用和原理探究（一）（转）

    zookeeper介绍zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目中的一个子项目,并且根据google发表的<The Chubby lock servic ...

  4. HDU5653 Bomber Man wants to bomb an Array 简单DP

    题意:bc 77 div1 1003(中文题面) 分析:先不考虑将结果乘以 1e6. 设 dp[i] 为从前 i 个格子的状态可以获得的最大破坏指数. 那么我们可以枚举每个炸弹,该炸弹向左延伸的距离和 ...

  5. Java&MySQL Type Mapping

    MySQL Type Name Return value of GetColumnClassName Returned as Java Class BIT(1) (new in MySQL-5.0) ...

  6. win7下的vxworks总结

    在visualbox下运行vxworks 先来看一张效果图: 在tornado端 成功运行第一个程序,输出了visualbox can run the vxworks ! 在vmware下的速度快多了 ...

  7. oracle 分区表和分区索引

    很复杂的样子,自己都没有看完,以备后用 http://hi.baidu.com/jsshm/item/cbfed8491d3863ee1e19bc3e ORACLE分区表.分区索引ORACLE对于分区 ...

  8. vijosP1137 组合数

    vijosP1137 组合数 链接:https://vijos.org/p/1137 [思路] 唯一分解定理. 简化式子为 : C = (n*…*m) / (n-m)!. 题目要求C质因子的数目,在质 ...

  9. HW5.17

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  10. HW5.10

    public class Solution { public static void main(String[] args) { int count = 0; for(int i = 1; i < ...