Css 倾斜菜单

在搜索Jquery/CSS菜单时，我发现了这个网站：

如果你看第一张图片，有一个倾斜的菜单，就像挂在铰链上一样，看起来真是太棒了，所以我点击了那个链接并访问了网站，但我没有在任何地方找到倾斜的菜单，不是在网站上，也不是在演示中：(

---

虽然我认为photoshop会让人非常恼火，但我想知道“是否真的可以使用CSS制作这种倾斜菜单？”

你可以尝试使用CSS

转换

HTML

当然可能，尽管我认为这会很糟糕

编辑-甚至可以将子菜单向后旋转-


*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
保险商实验室{
利润率：25px 0 0 25px；
填充：0；
宽度：250px；
边框：1px纯灰；
列表样式：无；
变换：旋转（-35度）；
变换原点：右上角；
}
李{
边缘底部：5px；
填充：0.25em
}


一个
两个
三
四
菲尔夫

是的……使用
transform:rotate
See Thank guys！将投票并选择最先出现的答案。@Paulie\u D你为什么认为它是糟糕的用户体验？除非你试图开始一种趋势，否则它会让人困惑，而且在浏览器窗口大小方面进行管理是一场噩梦。网络基本上是上向上/向下&左/右-添加ro这一切都很好，但它只是看起来“奇怪”。嘿！奇怪的是什么引起了我的注意：）虽然我同意如果页面上的许多元素开始看起来奇怪，这将是奇怪的，但我认为只有一个菜单（例如：设置）就足够吸引眼球了。但是浏览器窗口的大小是我没有想到的一个有效点…非常非常酷！现在要玩这个：）但你为什么认为它会很糟糕？
<div class="slanted">
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>

.slanted {
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
    margin-top: 40px;
}