码迷,mamicode.com
首页 > 其他好文 > 详细

巧用border制作箭头

时间:2018-05-14 22:56:18      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:otto   height   after   isp   bottom   style   osi   abs   oct   

<!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>

巧用border制作箭头

标签:otto   height   after   isp   bottom   style   osi   abs   oct   

原文地址:https://www.cnblogs.com/lstrive/p/9038419.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!