twitter-bootstrap - css3：制作标题导航菜单

Question

我正在尝试使用引导程序作为附加图像来制作标题为画布的导航项

我曾尝试通过使用此链接使用 css3 三角形来做到这一点，但它对我不起作用，你能帮我解决这个问题吗？以下是我的导航面板的代码

 <a class="menu-toggle rounded active" href="#">
      <i class="fa fa-times"></i>
    </a>
    <nav id="sidebar-wrapper" class="active">
          <ul class="sidebar-nav">
            <li class="sidebar-brand">
              <a class="js-scroll-trigger" href="#page-top">Off canvas navigation</a>
            </li>
            <li class="sidebar-nav-item">
              <a class="js-scroll-trigger" href="#page-top">Home</a>
            </li>
            <li class="sidebar-nav-item">
              <a class="js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="sidebar-nav-item">
              <a class="js-scroll-trigger" href="#services">Services</a>
            </li>
            <li class="sidebar-nav-item">
              <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="sidebar-nav-item">
              <a class="js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </nav>

标签： twitter-bootstrapcss

Answer 1

使用 SVG - 使用附件作为非常松散的参考。

<div class="main-container">
    <div class="left-container">
       <svg>
       <path d="M 0 10 L 8 10 L 5 0 L 30 10 L 0 10" stroke-width="" fill="#fff" stroke="">
    </path>
      </svg>

    </div>
    <div class="right-container">
       <ul>
          <li>menu item</li>
          <li>menu item</li>
          <li>menu item</li>
      </ul>
     </div>

 <div>