zoukankan html css js c++ java

css制作小三角

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

View Code

查看全文

相关阅读:
1014. 福尔摩斯的约会
 1009. 说反话
 1002. 写出这个数
 1031. 查验身份证
 1021. 个位数统计
 1006. 换个格式输出整数
 1058. A+B in Hogwarts
1027. Colors in Mars
1019. General Palindromic Number
Windows 新装进阶操作指南

原文地址：https://www.cnblogs.com/summer_shao/p/3927833.html