html实现向上向下箭头,纯css实现上下左右箭头啥都不说直接上代码
html:
css代码:
.box{
height:180px;
width:320px;
position:relative;
}
.arrow-bottom{
font-size:0;
line-height:0;
border-width:10px;
border-color:#2a4f6c;
border-top-width:0;
border-style:dashed;
border-bottom-style:solid;
border-left-color:transparent;
border-right-color:transparent;
position:absolute;
right:80px;
bottom:0;
}
.
arrow-up{
font-size:0;
line-height:0;
border-width:10px;
border-color:#2a4f6c;
border-bottom-width:0;borderbox
border-style:dashed;
border-top-style:solid;
border-left-color:transparent;
border-right-color:transparent;
position:absolute;
right:80px;
top:0;
}
.arrow-left{
position:absolute;
right:0px;
top:80;
border:10pxsolid#fff; border-left-color:#2a4f6c; width:0;
height:0;
}
.arrow-right{
position:absolute;
left:0px;
top:80;
border:10pxsolid#fff; border-right-color:#2a4f6c; width:0;
height:0;
}
效果图:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论