title: Two bootstrap columns where one has a diagonal edge
body: <p>I'm trying to make a menu with a sloped/diagonal edge in bootstrap like in this <a href="https://jsfiddle.net/wqn13ajg/4/" rel="nofollow">jsfiddle</a>. Although it kinda works I don't like how the div is still scrollable with the mousewheel (though not in the jsfiddle).</p>
  
  <p>This is caused by the <code>overflow-y: hidden;</code> property on the container div. Which I use to hide the excess border on my <code>.slope</code> div. I can't set any static height values because my content is dynamic.</p>
  
  <p>This makes me wonder if there's a better way to achieve this result.</p>
  
  <p><strong>HMTL</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="menu col-xs-4"&gt;
        &lt;ul&gt;
          &lt;li&gt;1. item&lt;/li&gt;
          &lt;li&gt;2. item&lt;/li&gt;
          &lt;li&gt;3. item&lt;/li&gt;
          &lt;li&gt;4. item&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="content col-xs-8"&gt;
        some content
        &lt;div class="slope"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.menu {
    background-color: lightblue;
  }
  
  .slope {
    height: 0;
    border-bottom: 1000px solid lightblue;
    border-right: 500px solid transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  
  .container {
    overflow-y: hidden;
  }
  </code></pre>