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;

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;

}

效果图：

html实现向上向下箭头,纯css实现上下左右箭头相关推荐

html动画箭头,纯css动画实现箭头向右无限前进
适用场景和效果描述:箭头线的宽度不定,箭头一直向右循环前进,且可随意设置颜色做不来gif,将就看吧原理: 背景设置渐变色,通过控制遮罩层的图形样式和位置,来实现箭头向右移动的效果,优点遮罩图形和背 ...
使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
html中展开的小箭头,纯css实现各种方向小箭头
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了梯形 Document .arrow { width: 10px; he ...
html点击圆点箭头分页,css实现小箭头的实现方式
Document *{ margin: 0; padding: 0; } /*transparent 为透明*/ /*箭头向下*/ .box-down{ display: inline-block; ...
有意思：textarea resize属性下纯CSS交互效果
一.众所周知的众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志. 有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做 ...
html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
css 绘制三角形箭头
转载自:http://ourjs.com/detail/532bc9f36922aa7e1d000001 OurJS 阅读全端发布订阅邮件用纯CSS实现的箭头分享到分类编程技巧 ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...

html实现向上向下箭头,纯css实现上下左右箭头

html实现向上向下箭头,纯css实现上下左右箭头相关推荐

最新文章

热门文章