技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS实现上下左右箭头(>)【在线演示及源码下载】

作者:admin    时间:2019-9-4 16:52:31    浏览:

本文介绍如何用纯CSS实现上下左右箭头(>)。

CSS实现上下左右箭头

CSS实现上下左右箭头

HTML标记:

<p>Right arrow: <i class="right"></i></p>
<p>Left arrow: <i class="left"></i></p>
<p>Up arrow: <i class="up"></i></p>
<p>Down arrow: <i class="down"></i></p>

CSS代码:

i {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

execcodegetcode

说明:

设置箭头粗细

设置箭头粗细的代码是:

border-width: 0 1px 1px 0;

我们只需把1px改为其他数字如3px,就得到不同粗细的箭头。

设置箭头颜色

另外,设置箭头颜色的代码是:

border: solid black;

 只需把black改为其他颜色,箭头就会变成其他颜色。

设置箭头大小

我们还可以设置箭头的大小,代码是:

padding: 3px;

3px改为其他数字如5px,箭头就会变大。

标签: css  箭头  
  • IT热文
  • 站长推荐