带有 CSS 的平行四边形导航背景

Posted 2023-04-12

【中文标题】带有 CSS 的平行四边形导航背景

【英文标题】：Parallelogram navigation background with CSS

【发布时间】：2012-07-10 06:19:51

【问题描述】：

我正在尝试创建此导航菜单（绿色突出显示为活动页面，灰色为悬停状态）：

我可以使用以下 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 后备。

感谢您的建议！

【问题讨论】：

供将来参考，cssdesk.com 仅适用于没有 javascript 组件的 CSS 和 html。我认为这种测试非常好。

我现在无法测试这个，但是如何将视觉效果放在 li 元素上，例如背景颜色和变换，然后在锚元素上设置变换：无？

在 jsFiddle 中应用 display: inline-block;。 jsfiddle.net/K3bQJ/5

有趣的问题。你知道，有时候只使用和图像真的很酷:)

+1 旁注： 对于使用 箭头 的备用 CSS3 导航方法，请参阅我的SO Answer。干杯！

【参考方案1】：

Try this 在标签内添加一个 span 并将其设置为相反的方向（注意使用 skewX，根据https://developer.mozilla.org/en/CSS/-moz-transform 认为这是正确的）

<ul id="nav">
    <li><a class="current-menu-item" href="#"><span>Nav Item 1</span></a></li>
<li><a href="#"><span>Nav Item 2</span></a></li>
<li><a href="#"><span>Nav Item 3</span></a></li>
</ul>

ul#nav li a 
    display: inline-block;
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
            transform: skewX(-10deg);
         -o-transform: skewX(-10deg);
       -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    color:#757575;


ul#nav li a span 
    display: inline-block;
            transform: skewX(10deg);
         -o-transform: skewX(10deg);
       -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);

【讨论】：

也有同样的想法，只是在a 上尝试过，而不是用跨度包装。

完美，这行得通！我只是将背景样式添加到 li 而不是 a 元素以避免添加更多标记，然后将反向倾斜设置为锚元素。非常感谢！

根据developer.mozilla.org/en/CSS/-moz-transform，您不应使用 skew() 而是提供您尝试倾斜的预期轴（在本例中为 skewX()）我已更新 cssdesk.com 链接

+1 很好的答案。仅供参考：您对 Jason 的最后评论很重要，因为 Firefox v14 删除了 transform skew()。我认为您的 cssdesk.com 演示也应该是您答案的一部分。干杯！