箭头怎么打 css

html-css014

箭头怎么打 css,第1张

图片中的箭头用的都是背景图片。

先找到保存这些图片下来,然后再写相应的CSS。

css背景代码:

background:url(bgimage.jpg) no-repeat -2px 0px //后面的-2px 0px可以去掉或者调整相应的图片坐标位置

就用div加css就能做出这种效果了.给你一个刚写的例子。

<div style='background:redheight:20pxwidth:30pxdisplay: inline-block'></div>

<div style='top:5pxheight: 0pxborder: 15px red solidwidth: 20pxborder-top-color: transparentborder-right-color: transparentborder-bottom-color: transparentdisplay: inline-blockposition: relativeleft: -4px'></div>

你可以做一个带箭头的div;然后样式如下:

div

{

/* 箭头的样式,你自己设计,下面是旋转的样式*/

transform:rotate(90deg)

-ms-transform:rotate(90deg)/* Internet Explorer */

-moz-transform:rotate(90deg)/* Firefox */

-webkit-transform:rotate(90deg)/* Safari 和 Chrome */

-o-transform:rotate(90deg)/* Opera */

}

这个是CSS3,所以浏览器并不是都兼容的。上面的deg就是角度单位度。