css实现箭头效果

实现箭头的方法有多种，可以直接让UI给一个图标，也可以直接用css样式来实现，以下是直接用样式写的，这里面写的是绝对定位，如不想引起样式错乱则需要用一个div包住。

1. 使用css，用两个三角形叠加实现

html code：

    <a href="javascript:;">
        <span class="arrow arrow-top arrowDown"> </span>
        <span class="arrow arrow-bottom arrowUp"></span>
    </a>

css code:

.arrow {
    position: absolute;
    border-width:4px; 
    margin-left: 5px;
}
.arrow-top{
    top: 55%; 
    border-color:#aaa transparent transparent transparent; 
    border-style:solid dashed dashed dashed; 
    border-bottom:none;
}
.arrowUp{
    border-color:transparent transparent $gold transparent !important;
}
.arrow-bottom{
    bottom: 50%; 
    border-color:transparent transparent #aaa transparent;
    border-style:dashed dashed solid dashed; 
    border-top:none;
}
.arrowDown{
    border-color: $gold transparent transparent transparent !important; 
}

2. 用一个正方形隐藏两边再加上旋转 实现向上箭头 ^

html  code :

<a class="to-top-triangle"></a>


css code:

.to-top-triangle{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -9px;
    border-left: 2px solid;
    border-top: 2px solid;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    color: #ddd;
}

3.设置before，after伪类来实现

// html代码
<div class="title">药品</div>

//css代码
.title {
    font-size: 0.3rem;
    color: #D2B569;
    text-align: center;
    line-height: 0.4rem;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 1.725rem;
    margin: auto;
    padding: 0.2rem 0.3rem;
}
.title:before {
    content: "";
    display: block;
    border-width: 0.12rem 0.07rem 0.12rem 0.07rem;
    border-style: solid;
    border-color: #DBBD72 transparent transparent transparent;
    position: absolute;
    top: 0.35rem;
    left: 0.1rem;
}
.title:after {
    content: "";
    display: block;
    border-width: 0.12rem 0.07rem 0.12rem 0.07rem;
    border-style: solid;
    border-color: transparent transparent #DBBD72 transparent;
    position: absolute;
    top: 0.23rem;
    left: 2rem;
}