CSS3实现三角小图标

CSS3的transform可以实现页面元素的扭转、变形等功能。

实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。


代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 12px;
				height: 12px;
				border-right: #000 solid 2px;
				border-bottom: #000 solid 2px;
				transform: translateY(-50%) rotate(45deg);
			}
		</style>
	</head>

	<body>

		<div>

		</div>

	</body>

</html>

其中translateY代表Y轴旋转,rotate代表角度。


代码下载地址:http://download.csdn.net/detail/u014175572/9534956

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章