我试图创建这个导航菜单(绿色亮点是活动页面,灰色悬停状态):平行四边形导航背景CSS
我可以用下面的CSS平行四边形:
ul#nav li a {
text-decoration:none;
padding:4px 10px;
border-radius:3px;
transform: skew(-10deg);
-o-transform: skew(-10deg);
-moz-transform: skew(-10deg);
-webkit-transform: skew(-10deg);
color:#757575;
}
ul#nav li a:hover {
background:#f3f1eb;
}
ul#nav li a.current-menu-item {
color:#fff;
background:#5d9732;
}
ul#nav li a.current-menu-item:hover {
background:#5d9732;
}
不幸的是,这会导致文字歪斜为好,出现斜体:
这里的显示设置(虽然歪斜不工作的jsfiddle)一个的jsfiddle:http://jsfiddle.net/K3bQJ/4/
有什么办法来防止文本的倾斜,所以它不会出现斜体?我正在加载jQuery,但宁愿避免它,或者至少有一个可用的CSS后备。
感谢您的任何建议!
以供将来参考,有HTTP:// cssdesk。 com /这是仅用于没有Javascript组件的CSS和HTML。我认为这种测试非常好。 – TheZ 2012-07-10 17:52:58
在jsFiddle中应用'display:inline-block;'。 http://jsfiddle.net/K3bQJ/5/ – 2012-07-10 17:54:23
有趣的问题。你知道,有时它真的很酷,只是使用和形象:) – 2012-07-10 18:09:57