title: Drawing a triangle over a div in CSS
body: <p>I'm actually trying to implement a design done for me into HTML5 and CSS3 with Twitter Bootstrap. </p>
  
  <p>I've got a sidebar on the left of the screen with a list inside, nothing complex.</p>
  
  <pre><code>&lt;html&gt;
  &lt;section class="sidebar"&gt;
      &lt;ul class="sidebar-menu"&gt;
          &lt;li class="active"&gt;
              &lt;a href="/home"&gt;
                  &lt;i class="fa fa-users active-fa"&gt;&lt;/i&gt; 
                  &lt;span class="menu-title"&gt;MY USERS&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt; 
      &lt;/ul&gt;
  &lt;/section&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to arrive to this result : </p>
  
  <p><a href="https://i.stack.imgur.com/3H69o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3H69o.png" alt="Triangle on the right side"></a></p>
  
  <p>Any idea on the CSS code to manage to have that triangle on the right side centered in the middle bottom right ? </p>