巧用border制作箭头

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_30629977

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lstrive/p/9038419.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>鼠标经过灰色区域出现黑色三角</h1>
<div><a href="javascript:void(0);"></a></div>
<style>
div{ display: block; height: 30px; background:#ccc; }
div a{ display: block; width:50px; height: 30px; position: relative; }
div:hover a:after{
content:'';
display:block;
border-style:solid;
border-width:0px 6px 6px 6px;
border-color:#000 transparent;
position:absolute;
left:50%;
bottom:0;
margin-left:-6px;
}
</style>
</body>
</html>