div的文字倾斜

最近要写一个页面,需要一排文字是倾斜的,我就写了一下

<div class="qingx">倾斜导航</div>
div.qingx{
				-moz-transform: translateY(-20deg);
				-o-transform: translateY(-20deg);
				transform: translateY(-20deg);
				 transform:rotate(-20deg);
				-ms-transform:rotate(-20deg);
				-webkit-transform:rotate(-20deg);
				padding:5px 10px;text-align:center;
				background-color:lightskyblue;
				width:80px;
				height:30px;
				line-height:30px;
				color: white;
				margin: 50px;
			}

  效果图:

好啦,可以实现了,不过就是要加上那些兼容的前缀。

 

  

posted @ 2018-01-09 14:27  额爷  阅读(1006)  评论(0编辑  收藏  举报