向右箭头代码css,CSS的箭头代码

CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。

最终效果如下图所示:

/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */

div.arrow-up {

width: 0;

height: 0;

border-left: 5px solid transparent; /* 左边框的宽 */

border-right: 5px solid transparent; /* 右边框的宽 */

border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */

font-size: 0;

line-height: 0;

}

/* 向下的箭头类似于 V */

div.arrow-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid #f00;

font-size: 0;

line-height: 0;

}

/* 向左的箭头: 只有三个边：上、下、右。而

div.arrow-left {

width: 0;

height: 0;

border-bottom: 15px solid transparent; /* 下边框的高 */

border-top: 15px solid transparent; /* 上方边框的高 */

border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */

font-size: 0;

line-height: 0;

}

/* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。宽=左边框的长度 */

div.arrow-right {

width: 0;

height: 0;

border-bottom: 15px solid transparent; /* 下边框的高 */

border-top: 15px solid transparent; /* 上方边框的高 */

border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */

font-size: 0;

line-height: 0;

}

其中的秘密，就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。

边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。如果加上旋转，不知道似的否可以指定各种不同方向的图形?

另外一种写法，以向上举例：

i.arrow-up{

display: inline-block;

width: 0;

height: 0;

border-width: 10px;

border-style: dashed;

border-color: transparent; /* 透明 */

border-top-width: 0;

border-bottom-color: #e7e7eb;

border-bottom-style: solid;

}

当然，这个处理方法优越的地方就在于代码量非常少，同时非常灵活。

向右箭头代码css,CSS的箭头代码相关推荐

css 实现三角形箭头
实现方法插入DOM <div id="triangle1"></div> <div id="triangle2">< ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
css屏幕大小的容器,位置2箭头固定到CSS页面容器的外部 - 屏幕大小
我想创建一个HTML页面滑块,所以我有我的容器div,然后坐在外面,在左边我有一个Previous图标和右侧我有一个下一个图标.位置2箭头固定到CSS页面容器的外部 - 屏幕大小我的问题是,当我将窗 ...
使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
css 绘制三角形箭头
转载自:http://ourjs.com/detail/532bc9f36922aa7e1d000001 OurJS 阅读全端发布订阅邮件用纯CSS实现的箭头分享到分类编程技巧 ...
python图标的演变_python day 22 CSS拾遗之箭头，目录，图标
lanxing 4. CSS拾遗之箭头画法 .up { border-top: 30px solid green; border-right: 30px solid transparent; bord ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
css空心图形,css画空心箭头
css画空心箭头 .hot-point-title { width: 30px; height: 38px; border:1px solid #999; position: relative; } ...
html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
css代码总结,css属性代码大全总结（一）
一 CSS文字属性: color : #999999; font-family : 宋体,sans-serif; font-size : 9pt; font-style:itelic; font-va ...

向右箭头代码css,CSS的箭头代码

向右箭头代码css,CSS的箭头代码相关推荐

最新文章

热门文章