首页 > 代码库 > css制作小三角

css制作小三角

2024-07-18 19:42:45   228人阅读

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

 


联系
我们