css 指向下一个的箭头怎么做

html-css014

css 指向下一个的箭头怎么做,第1张

就用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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>鼠标形状</title>

<style>

* {margin:0padding:0}

ul {width:250pxmargin:50px autoborder:1px solid #f00border-bottom:none}

li {width:250pxheight:30pxline-height:30pxtext-align:centerlist-style:nonebackground:#000border-bottom:1px solid #f00color:#ffffont-weight:bold}

</style>

</head>

<body>

<ul>

<li style="cursor:pointer">pointer 手型</li>

<li style="cursor:crosshair">crosshair 十字</li>

<li style="cursor:text">text 文本</li>

<li style="cursor:wait">wait 等待</li>

<li style="cursor:help">help 问号</li>

<li style="cursor:move">move 移动</li>

<li style="cursor:e-resize">e-resize 右的箭头</li>

<li style="cursor:ne-resize">ne-resize 右上的箭头</li>

<li style="cursor:n-resize">n-resize 上的箭头</li>

<li style="cursor:nw-resize">nw-resize 左上的箭头</li>

<li style="cursor:w-resize">w-resize 左的箭头</li>

<li style="cursor:sw-resize">sw-resize 左下的箭头</li>

<li style="cursor:s-resize">s-resize 下的箭头</li>

<li style="cursor:se-resize">se-resize 右下的箭头</li>

</ul>

</body>

</html>