css3：制作标题导航菜单

Question

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

我尝试通过使用this链接使用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>

Answer 1

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

 <label class="img-check" onclick="checkUncheck(this)">
     <div class="bg-img" style="background-image: url('http://www.fujifilm.com.my/Products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG'); width: 20%;height: 200px;background-position: center;background-size: cover;"></div>
     <input type="hidden" name="chassis" value="valasdfas1"  class="hidden" autocomplete="off" >
 </label>