在不同的部分创建不同宽度的导航栏？

Question

我如何创建一个类似于此的导航栏，它具有不同的曲线和角度？ （我正在考虑使用不同的跨度并使用Transform属性进行调整。我是否太过关闭还是有其他更简单的方法？还有一种方法，在移动视图中看起来不会太荒谬。）：

Answer 1

最简单的方法是多个背景图像。一个宽图像为蓝色背景和蓝线，一个为白线。使它们都很宽，这样你就可以确定它可以在多种分辨率下工作。将蓝色背景与左侧对齐，将白线与右侧对齐。

（Something like this）

CSS会有点乱，所有的对角线。难以维护且不完全兼容浏览器。

Answer 2

像这样的东西可能会有所帮助

这是HTML

<div id="navbar">
    <div class="logo float-left"></div>
    <div class="center-nav float-left">
         <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Services</a></li>
             <li><a href="#">Contact Us</a></li>
         </ul>
    </div>
    <div class="social-media-icons float-left"></div>
</div>

这是CSS

.logo{
   background: url('img/image.jpg');
   width: 20%; /*example */
   height: 242px;
 }
 .float-left{
    float:left;
 }
 .center-nav{
      /* crop image of width 1px height 242px (image height) */
     background: url(cropped.png);
     background-repeat: repeat-x;
     width:80%; /*example */
 }
 .social-media-icons{
      /* Same as .center-nav (crop the background of social media icons and repeat-x) */
 }

通过这种方式，您还可以实现跨浏览器兼容性