Fester Fester - 1 month ago 23
CSS Question

Two bootstrap columns where one has a diagonal edge

I'm trying to make a menu with a sloped/diagonal edge in bootstrap like in this jsfiddle. Although it kinda works I don't like how the div is still scrollable with the mousewheel (though not in the jsfiddle).

This is caused by the

overflow-y: hidden;
property on the container div. Which I use to hide the excess border on my
.slope
div. I can't set any static height values because my content is dynamic.

This makes me wonder if there's a better way to achieve this result.

HMTL

<div class="container">
<div class="row">
<div class="menu col-xs-4">
<ul>
<li>1. item</li>
<li>2. item</li>
<li>3. item</li>
<li>4. item</li>
</ul>
</div>
<div class="content col-xs-8">
some content
<div class="slope"></div>
</div>
</div>
</div>


CSS

.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;
}

Answer

And something like this?

.menu {
  background-color: lightblue;
  overflow: hidden;
}

.menu:after {
  content: "";
  border-bottom: 1000px solid lightblue;
  border-right: 500px solid white;
  position: absolute;
  left: 80%;
  top: 0;
}

Jsfiddle