css 三角符组件

浏览数：29 / 时间：2015年06月09日

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
    /* 浮动与清浮动 */
    
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
    .cf {
        *zoom: 1
    }
    .cf:after {
        clear: both;
        content: ‘.‘;
        display: block;
        height: 0;
        overflow: hidden
    }
    /* 三角符号 */
    
    .arrow_t,
    .arrow_r,
    .arrow_b,
    .arrow_l {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        margin: 0 4px;
        display: inline-block;
        border: 6px dashed transparent;
    }
    .arrow_t {
        border-bottom: 6px solid #40cfea;
        border-top: 0 none;
    }
    .arrow_r {
        border-left: 6px solid #40cfea;
        border-right: 0 none;
    }
    .arrow_b {
        border-top: 6px solid #40cfea;
        border-bottom: 0 none;
    }
    .arrow_l {
        border-right: 6px solid #40cfea;
        border-left: 0 none;
    }
    /* 带边框的三角符号 */
    
    .border_arrow_t,
    .border_arrow_r,
    .border_arrow_b,
    .border_arrow_l {
        line-height: 20px;
        border: 1px solid #40cfea;
        padding: 3px 6px;
        display: inline-block;
        background: #e4f6fa;
        color: #40cfea;
        position: relative;
        margin: 0 4px
    }
    .border_arrow_t b,
    .border_arrow_r b,
    .border_arrow_b b,
    .border_arrow_l b,
    .border_arrow_t i,
    .border_arrow_r i,
    .border_arrow_b i,
    .border_arrow_l i {
        position: absolute;
        height: 0;
        width: 0;
        line-height: 0;
        font-size: 0;
        border: 6px dashed transparent;
    }
    .border_arrow_l b {
        border-right: 6px solid #40cfea;
        left: -6px;
        top: 50%;
        margin-top: -4px;
        border-left: 0 none;
    }
    .border_arrow_l i {
        border-right: 6px solid #e4f6fa;
        left: -5px;
        top: 50%;
        margin-top: -4px;
        border-left: 0 none;
    }
    .border_arrow_r b {
        border-left: 6px solid #40cfea;
        right: -6px;
        top: 50%;
        margin-top: -4px;
        border-right: 0 none;
    }
    .border_arrow_r i {
        border-left: 6px solid #e4f6fa;
        right: -5px;
        top: 50%;
        margin-top: -4px;
        border-right: 0 none;
    }
    .border_arrow_t b {
        border-bottom: 6px solid #40cfea;
        top: -6px;
        left: 50%;
        margin-left: -4px;
        border-top: 0 none;
    }
    .border_arrow_t i {
        border-bottom: 6px solid #e4f6fa;
        top: -5px;
        left: 50%;
        margin-left: -4px;
        border-top: 0 none;
    }
    .border_arrow_b b {
        border-top: 6px solid #40cfea;
        bottom: -6px;
        left: 50%;
        margin-left: -4px;
        border-bottom: 0 none;
    }
    .border_arrow_b i {
        border-top: 6px solid #e4f6fa;
        bottom: -5px;
        left: 50%;
        margin-left: -4px;
        border-bottom: 0 none;
    }
    /* 半透明背景 */
    
    .btm,
    .btm_hover:hover {
        color: #fff;
        filter: progid: dximagetransform.microsoft.gradient(enabled=‘true‘, startcolorstr=‘#44000000‘, endcolorstr=‘#44000000‘)
    }
    :root .btm,
    :root .btm_hover {
        filter: none;
        background: rgba(0, 0, 0, 0.2);
    }
    </style>
</head>

<body>
    <span class="arrow_t"></span>
    <span class="arrow_r"></span>
    <span class="arrow_b"></span>
    <span class="arrow_l"></span>
    <span class="border_arrow_t"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
    <span class="border_arrow_r"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
    <span class="border_arrow_b"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
    <span class="border_arrow_l"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span>
</body>

</html>