title: Pointed/angled arrow-style borders in CSS
body: <p>I'm making a breadcrumb menu and attempting to do it in pure CSS so I don't have to use a background image to get an arrow shape. Is it possible to achieve this angled border style with pure CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/MdWfW.png" alt="Arrow breadcrumbs"></p>
  
  <p>The best I have been able to do looks like this (this is just a draft screenshot I made a while ago, so please disregard that it implies that breadcrumbs are fruits and/or delicious):</p>
  
  <p><img src="https://i.stack.imgur.com/bxz3i.jpg" alt="enter image description here"></p>
  
  <p>I was achieving it using CSS like this: </p>
  
  <pre><code>.breadcrumb li {
      border-right: 2px solid #ECECEC;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
  }
  </code></pre>
  
  <p>Here's the whole CSS in case it helps:</p>
  
  <pre><code>div.breadcrumb {
      display: block;
      float: left;
      border-bottom: 2px solid gray;
  }
  ul.breadcrumb {
      display: block;
      float: left;
      list-style-type: none;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
  }
  .breadcrumb li {
      float: left;
      display: list-item;
      background-color: #F2F2F2;
      border-right: 2px solid #ECECEC;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
      position: relative;
      padding: 9px 20px 10px 35px;
      margin-left: -32px;
  }
  .breadcrumb li.first-crumb {
      background: #E7E7E7;
      padding-left: 20px;
      margin-left: 0px;
  }
  .breadcrumb li.last-crumb {
      border-top: 1px solid #E3E3E3;
      border-right: 1px solid #E3E3E3;
      background: white;
      padding-top: 9px;
      padding-bottom: 9px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
  }
  .breadcrumb li:not(.first-crumb) {
      padding-left: 45px;
  }
  .breadcrumb li:not(.last-crumb) a:after {
      content: "\27F6";
      margin-left: 10px;
      color: #444444;
      margin-right: 0px;
  }
  .breadcrumb li a,
  .breadcrumb li span {
      display: block;
      float: left;
      position: relative;
  }
  .breadcrumb li a {
      text-decoration: none;
  }
  .breadcrumb li.first-crumb a {
      padding-left: 0px;
      margin-left: 0px;
  }
  </code></pre>
  
  <p>My markup looks like this:</p>
  
  <pre><code>&lt;div class="breadcrumb"&gt;
      &lt;ul class="breadcrumb"&gt;
          &lt;li class="breadcrumb first-crumb"&gt;&lt;a href="#"&gt;Produce&lt;/a&gt;&lt;/li&gt;
          &lt;li class="breadcrumb"&gt;&lt;a href="#"&gt;Fruits&lt;/a&gt;&lt;/li&gt;
          &lt;li class="breadcrumb last-crumb"&gt;&lt;span&gt;breadcrumb-ilicious!&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Edit</em>: It would be nice if I could get it to look like there's an actual border too. This is my crude skitch of it:</p>
  
  <p><img src="https://i.stack.imgur.com/or5CT.jpg" alt="enter image description here"></p>
  
  <p>(I tried adding several triangles per Olaf's suggestion and the only thing I couldn't get to work was correcting the obvious gap between two triangles without changing the angle of the triangle poking out to form the border.)</p>
  
  <p><img src="https://i.stack.imgur.com/C0m3i.jpg" alt="enter image description here"></p>