slope

example for stackoverflow

by joshmoto

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div class="row">
      <div id="block">
        <div id="content">
          Some content
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sint culpa, dolor quaerat autem repellendus, doloremque molestiae, natus ut veritatis eius deserunt mollitia. Eaque ex facilis nobis obcaecati dolorem odio veniam laudantium nemo voluptates voluptas nulla ducimus officia quod maiores corporis hic nisi incidunt aliquid fugiat tenetur at, labore earum. Sapiente perspiciatis, laudantium consectetur sed omnis porro quasi quae. Neque voluptatem, praesentium mollitia ad cumque voluptates ipsa dolores velit beatae odio veniam, voluptatum atque repellat. Minus perferendis, natus accusantium! Sunt architecto provident error commodi. Provident dolorum praesentium quis fuga saepe odio fugiat reiciendis laborum sed at facilis natus facere, dignissimos repellendus. Numquam fugiat consectetur deleniti tempora quibusdam distinctio nulla sequi voluptate inventore voluptas cupiditate eaque soluta neque optio rem vel autem adipisci id fuga sapiente voluptates harum, eius est qui. Asperiores molestiae recusandae cum non sint deserunt nisi aliquid dicta obcaecati ut repellat tenetur laudantium eaque, amet praesentium numquam laboriosam, beatae vitae vel. Tenetur recusandae dicta voluptate aperiam architecto saepe provident odit deleniti possimus consequatur libero voluptas sequi officia minima perspiciatis repellendus voluptates nostrum fugit voluptatem, vero. Minima, tempora vero dicta provident, ducimus nobis quibusdam nam blanditiis eligendi architecto pariatur, enim ut eos reiciendis quisquam aut, eum at porro esse!
        </div>
       ...

CSS

.row {
  margin: 0 !important;
}

#block {
  background-color: green;
  width: 50%;
  height: auto;
  min-height: 150px;
  position: relative;
}

#slope {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #fff;
  border-bottom: solid #fff;
  border-left: solid green;
  border-width: 0 0 0 0;
}

JavaScript

$(document).ready(function() {
  updateSize();


  $(window).resize(function() {
    updateSize();
  });
});

function updateSize() {
  $('#slope').css('border-width', '0 0 ' + $('#slope').outerHeight() + 'px ' + $('#slope').outerHeight() / 6 + 'px');
}