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

查看全文

相关阅读:
被放弃的概率权,机器下围棋不理会沉没成本
 百位性感女明星三围大曝光，体型测试设计
 斯坦福大学机器学习，EM算法求解高斯混合模型
 Javascript图片预加载详解
 使用马尔可夫模型自动生成文章
 18种女粉引流方法、效果、评估
 既然认准了这条路，就不必打听要走多久！
新媒体运营10个大坑，思维导图版
 谷歌发布"自动机器学习"技术 AI可自我创造
 Centos7下PHP的卸载与安装nginx

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