欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css实现箭头效果

程序员文章站 2024-03-25 11:24:04
...

实现箭头的方法有多种,可以直接让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;
}

css实现箭头效果

相关标签: css H5