下拉箭头如何用css3实现?

下拉箭头如何用css3实现?下面本篇文章通过实例来说明一下用css3实现下拉箭头的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

效果图:

1.png

说明:

利用css的border属性,即可实现三角形的绘制。原理:css盒模型

一个盒子模型包括: margin+border+padding+content,上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等,调整宽度大小可以调节三角形形状.

利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0,margin,padding也为0,所以元素框的大小就是border的叠加。

由于相邻boder会重叠,故存在内容宽高时其实任意一边存在的border都是梯形的,当div内容宽高为0时,border就表现为三角形。

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是下拉箭头如何用css3实现?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏