Question

我想制作一个类似于下图所示的导航栏，但是我正在努力弄清楚如何让边缘上的边框成角度和阴影外观。

我正在使用Bootstrap的navbar示例作为构建页面的启动器：

<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

您只需使用图片，并在其上放置菜单链接即可实现此效果，或者您可以使用clip-path css属性执行此操作。

clip-path属性允许您通过将元素剪切为基本形状（圆形，椭圆形，多边形或嵌入）或SVG源来在CSS中创建复杂形状。

例如：

-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 3

有很多方法可以实现这一点，您可以使用clip-path或pseudo选择器，甚至是transform。所以，它总是取决于你如何构建它，无论是艰难的方式还是简单的方式都无关紧要。只要你得到你想要的东西，你就会好起来，但如果你找到一个更容易的方法，那么这对你来说是个好处。

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

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

CSS-Tricks和Viget都是很好的参考，我建议您查看它们。

以下是您要求的样本：

＆＃13;

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%);

}

＆＃13;

<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>

＆＃13;

Answer 4

要实现这一目标，您需要使用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;
}

根据您的需要进行调整。

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

4 个答案: