如何在导航菜单的两侧添加有角度的边框？

Question

我想制作一个类似于下图的导航栏，但是我正在努力弄清楚如何使边缘上的边框倾斜并具有阴影外观。

我正在使用 Bootstrap 的导航栏示例作为构建页面的起点：

<header>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="http://localhost/mxvsatv/">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
        </nav>
    </div>
</header>

我发现图片中使用的样式如下，但不确定如何实现：

header.gamez-header-variation-1 .top-menu-container:before {
content: "";
border-top: 100px solid rgba(15, 27, 51, 0.18);
border-left: 100px solid transparent;
border-right: 100px solid transparent;
position: absolute;
width: 117%;
left: -8.5%;
top: 0;
z-index: -1;}
header.gamez-header-variation-1 .top-menu-container:after {
content: "";
border-top: 90px solid rgba(15, 27, 51, 0.45);
border-left: 90px solid transparent;
border-right: 90px solid transparent;
-webkit-filter: drop-shadow(0px -14px 13px rgba(0, 213, 197, 0.8));
filter: drop-shadow(0px -14px 13px rgba(0, 213, 197, 0.8));
position: absolute;
width: 110%;
left: -5%;
top: 0;
z-index: -1;

Answer 1

我认为最简单的方法是为此使用背景图片。

Answer 2

要实现这一点，您需要使用 pseudo 选择器 before 并在导航之后

 /* this will add a triangle to the left of the nav */
 nav:before {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid blue; 
}
/* this will add a triangle to the right of the nav */
nav:after {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
}

根据您的需要进行调整。

Answer 3

您可以通过仅使用图像并在其顶部放置菜单链接来实现该效果，或者您可以使用 clip-path css 属性.

clip-path 属性允许您在 CSS 中制作复杂的形状，方法是将元素剪裁成基本形状（圆形、椭圆形、多边形或插图），或剪裁成SVG 来源。

例如：

-webkit-clip-path: polygon(0 0, 100% 0, 81% 54%, 19% 54%);
clip-path: polygon(0 0, 100% 0, 81% 54%, 19% 54%);

查看 this tool 来玩 clip-path 属性。

Answer 4

有很多方法可以实现这一点，您可以使用 clip-path 或 pseudo 选择器，甚至 transform。所以，它总是取决于你如何构建它，不管是困难的方法还是简单的方法。只要你得到你想要的，你就可以开始了，但如果你找到更简单的方法，那么这对你来说将是一个加分项。

@bntzio 提到 Clippy- 一个有用的工具，可以满足您的需求。

此外，您可以阅读这些参考资料以了解有关剪辑路径的更多信息：

CSS-Tricks and Viget 两者都是很好的参考，我鼓励您查看它们。

这是您要求的示例：

body {
margin: 0;
padding: 0;
  background: #276E8E;
}
div.wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
  width: 80%;
}
div.box-container {
  width: 95%;
  margin: auto;
}
div.box-one {
 position: relative;
  background: rgba(0,0,0, 0.05);
  height: 150px;
  width: 100%;
-webkit-clip-path: polygon(0 0, 100% 0, 80% 99%, 20% 100%);
clip-path: polygon(0 0, 100% 0, 80% 99%, 20% 100%);
}
div.box-two {
  background: rgba(19,80,98, 0.8);
  height: 140px;
  width: 100%;
-webkit-clip-path: polygon(0 0, 100% 0, 80% 99%, 20% 100%);
clip-path: polygon(0 0, 100% 0, 80% 99%, 20% 100%);

}

<div class="wrapper">
  <div class="box-one">
   <div class="box-container">   
    <div class="box-two">
      <div class="content">
      <!-- content here -->
      </div>  
      </div>  
    </div>  
  </div>  
</div>

如何在导航菜单的两侧添加有角度的边框？

How do I add angled borders to the sides of a navigation menu?

css

navbar