Expandable angled div without using JS

Question

I'm trying to create an angled div which will expand its height based on how much content is inside. I can grab the height values using javascript, but I was wondering if this was possible using only CSS.

So far I've created my desired shape & look but it only works because of two hardcoded CSS heights -

.content-slice{ min-height: 300px;}
.slice:after {border-top: 300px solid #fff;}

Example image of my goal -

My Markup -

<div class="content-slice slice-left">
   <div class="slice-bg">
      <div class="slice">

      </div>
      <div class="container">
         <div class="row">
            <div class="col-md-6 content-hold">
              <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse maximus augue turpis, semper vestibulum sem semper id. Duis in est quis est venenatis suscipit. Pellentesque eget neque odio. Cras quis hendrerit felis. Donec ultricies risus non elit viverra, eu pulvinar sapien aliquam. Morbi in elit porttitor, vehicula nibh sed, maximus est. Sed cursus sapien leo, et laoreet enim vestibulum sit amet. Sed ut faucibus elit, eget accumsan lectus. Quisque sit amet porttitor purus. Maecenas ornare lobortis nunc at varius. Ut a porttitor purus, id ultricies velit. Ut orci turpis, vestibulum venenatis malesuada et, ultricies at lacus. Suspendisse varius in ante ut ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Mauris et faucibus metus. Fusce ut magna quam. Suspendisse blandit sagittis nisi, mattis facilisis turpis imperdiet ac. Etiam vel nulla vel libero elementum aliquet. Ut vitae libero turpis. Ut sed risus at urna congue facilisis. Morbi sollicitudin sit amet orci accumsan consequat. Etiam sed justo turpis. Proin vitae purus sapien. Nulla eget feugiat purus, non imperdiet diam.      
              </p>               
            </div>
            <div class="col-md-5 col-md-offset-1">

            </div>
         </div>
      </div>
   </div>
   <div class="clearfix"></div>
</div>

My CSS -

.content-slice{
   min-height: 300px;
   transition: all ease 350ms;
   position: relative;
   margin: 50px 0px;
   z-index: 10;
}

.slice-bg{
  background: #fff;
  min-height: 100%;
  position: absolute;
  width: 100%;
  color: #fff;
}

.content-hold{
  color: #fff;
}

.slice{
  width: 60%;
  background-color: #373737;
  min-height: 100%;
  position: absolute;
  color: #fff;
}
.slice:after {
  content: '';
  width: 0;
  height: 0;
  background-size: cover;
  border-top: 300px solid #fff;
  border-left: 130px solid #373737;
  position: absolute;
  right: 0;
}

JSFiddle - https://jsfiddle.net/09vywcuj/11/

Answer 1

You can simplify all your code by simply using padding and background like below:

p {
  padding: 20px 100px 20px 20px;
  background:linear-gradient(to top right,transparent 50%,white 51%) 100% 0/80px 100% no-repeat;
  background-color: #373737;
  color: #fff;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar magna porta luctus scelerisque. Aenean eleifend luctus odio, vel laoreet justo aliquet ut. Curabitur rutrum dictum lacinia. Integer vel pulvinar neque. Donec a fringilla justo.
  Integer vulputate tempor ipsum, sed iaculis lectus laoreet faucibus. Integer bibendum nisl ut leo porttitor mattis. Aenean non massa in libero mattis condimentum sed sed risus.</p>

Or like this in case you need to keep it transparent:

body {
 background:pink;
}

p {
  padding: 20px 100px 20px 20px;
  background:
  linear-gradient(#373737,#373737) 0 0/calc(100% - 80px) 100% no-repeat,
  linear-gradient(to top right,#373737 50%,transparent 51%) 100% 0/80px 100% no-repeat;
  color: #fff;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar magna porta luctus scelerisque. Aenean eleifend luctus odio, vel laoreet justo aliquet ut. Curabitur rutrum dictum lacinia. Integer vel pulvinar neque. Donec a fringilla justo.
  Integer vulputate tempor ipsum, sed iaculis lectus laoreet faucibus. Integer bibendum nisl ut leo porttitor mattis. Aenean non massa in libero mattis condimentum sed sed risus.</p>

And here is an example using bootstrap where you can add a pseudo-element to create the overflowing part:

body {
  background: pink;
}

p {
  padding: 20px 100px 20px 20px;
  background: linear-gradient(#373737, #373737) 0 0/calc(100% - 80px) 100% no-repeat, linear-gradient(to top right, #373737 50%, transparent 51%) 100% 0/80px 100% no-repeat;
  color: #fff;
  position: relative;
}

p:before {
  content:" ";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  left: -10000px;
  background: #373737;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar magna porta luctus scelerisque. Aenean eleifend luctus odio, vel laoreet justo aliquet ut. Curabitur rutrum dictum lacinia. Integer vel pulvinar neque. Donec a fringilla
        justo. Integer vulputate tempor ipsum, sed iaculis lectus laoreet faucibus. Integer bibendum nisl ut leo porttitor mattis. Aenean non massa in libero mattis condimentum sed sed risus.</p>
    </div>
  </div>
</div>