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;
}