title: Breadcrumb Chevrons CSS
body: <p>I'm trying to replicate the chevron breadcrumb code located at: <a href="http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html" rel="nofollow">http://line25.com/wp-content/uploads/2013/breadcrumbs/demo/demo.html</a></p>
  
  <p>But can't seem to get it to work.</p>
  
  <p>My HTML &amp; CSS can be found at the CodePen here:
  <a href="http://codepen.io/anon/pen/eNWrLj" rel="nofollow">http://codepen.io/anon/pen/eNWrLj</a></p>
  
  <p>Basically, what's going on, is that I'm trying to add the left-side triangular cutout to the breadcrumbs, but it just isn't working.</p>
  
  <p>The cutout is thrown waaaaay to the left-hand side of the screen for some reason, instead of being where it should be.</p>
  
  <p>I also can't use left, right, top, any of that to position the left-side triangular cutout because the content of the breadcrumbs is randomly generated. Could be 1 word, could be 3+ words. Never know. Positioning it statically would just be silly and messy.</p>
  
  <p>Any ideas?</p>
  
  <p>Thank you.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="breadcrumbDiv col-lg-12" id="category_bread_crumb"&gt;
          &lt;ul class="breadcrumb"&gt;
              &lt;li&gt;&lt;a href="categories?catid="&gt;Home&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt;&lt;a href="/Fashion-and-Apparel"&gt;Fashion and Apparel&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="active"&gt;Shirts&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>