下拉菜单无法使用剪辑路径 css

Question

我正在使用对角线边的导航栏，所以我使用 clip-path 但我的下拉菜单不起作用。我该如何解决它。

谢谢。

示例代码

https://www.bootply.com/HBn3AUWrKQ

Answer 1

您可以添加一个伪元素三角形，它绝对定位在模拟角度的边栏左侧，而不是剪切整个导航栏。这将是更好的维护选择。为角度样式添加一个新的 class 也是一个很好的建议。只需删除剪辑路径样式并将此 CSS 添加到 .navbar:

.navbar-width-angle::before {
    /* dimensions and position */
    content: "";
    left: -1px; /* remove overlapping of orange-bg */
    width: 0;
    height: 0;
    position: absolute;

    /* styles for the triangle */
    border-style: solid;
    border-width: 50px 50px 0 0;
    border-color: #ffffff transparent transparent transparent;
}

我将此工具用于 css 个三角形：http://triangle.designyourcode.io/

下拉菜单无法使用剪辑路径 css

Dropdown menu not working using clip-path css

css

twitter-bootstrap

clip-path