用css3如何实现下拉箭头效果
下面我们就通过代码实例来看看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉菜单</title>
<style>
a {
display: block;
width: 50px;
height: 50px;
padding: 0 20px;
background: #000;
text-decoration: none;
text-align: center;
line-height: 50px;
color: #fff;
}
a .icon_more {
display: inline-block;
!!! vertical-align: middle;
width: 0;
height: 0;
border: 5px solid transparent;
/*5px 足够了*/
border-top-color: #fff;
/*top箭头向下 bottom箭头向上*/
}
a:hover .icon_more {
transform: rotate(180deg);
transition: .2s ease-in;
}
</style>
</head>
<body>
<a href="">更多
<span class="icon_more"></span>
</a>
</body>
</html>效果图：
说明：
利用css的border属性，即可实现三角形的绘制。原理：css盒模型
一个盒子模型包括: margin+border+padding+content，上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等，调整宽度大小可以调节三角形形状.
利用CSS的border以及它的属性值transparent来实现三角形，其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是border的叠加。
由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形。
更多web前端自学知识，请查阅 HTML中文网 ！！
以上就是下拉箭头如何用css3实现？的详细内容，更多请关注易知道|edz.cc其它相关文章！
