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

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