Javascript 不使用JS的可扩展角度div

我正在尝试创建一个有角度的div，它将根据内部内容的多少来扩展其高度。我可以使用javascript获取高度值，但我想知道是否可以只使用CSS

到目前为止，我已经创建了我想要的形状和外观，但它只工作，因为有两个硬编码的CSS高度-

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

我的目标的示例图像-

我的标记-

<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>

---

jshiddle-

只需使用填充和背景，即可简化所有代码，如下所示：

p{
填充：20px 100px 20px 20px；
背景：线性梯度（右上角，透明50%，白色51%）100%0/80px 100%无重复；
背景色：#3737；
颜色：#fff；
}

Lorem ipsum Door sit amet，是一位杰出的领导者。pulvinar magna porta luctus scelerisque酒店。埃尼安·埃利芬德·卢克图斯·奥迪奥，拉奥里特·阿利奎特·奥迪奥。金樱子。整叶枕叶。别再胡闹了。
整只秃鹫的同侧颞叶，它是一只秃鹫。整数比本杜姆尼斯利奥波特提托马蒂斯。libero mattis调味品中的Aenean non massa sed risus。

您只需使用填充和背景即可简化所有代码，如下所示：

p{
填充：20px 100px 20px 20px；
背景：线性梯度（右上角，透明50%，白色51%）100%0/80px 100%无重复；
背景色：#3737；
颜色：#fff；
}

Lorem ipsum Door sit amet，是一位杰出的领导者。pulvinar magna porta luctus scelerisque酒店。埃尼安·埃利芬德·卢克图斯·奥迪奥，拉奥里特·阿利奎特·奥迪奥。金樱子。整叶枕叶。别再胡闹了。
整只秃鹫的同侧颞叶，它是一只秃鹫。整数比本杜姆尼斯利奥波特提托马蒂斯。libero mattis调味品中的Aenean non massa使用了sed risus。

嗨，谢谢，我在这里看到的问题是内容需要放在

.container

div中，而带有背景的div必须向左全宽伸展。希望这是有道理的。因此，内容不能与div本身的宽度相同，而是限制在引导过程中container@Sam只需删除所有内容，只保留容器/行和一列-*-12，然后在容器上应用此背景；）@Sam添加了一个使用bootstrap的示例；）嗨，对不起，我不清楚我之前的评论内容必须在容器内，但背景颜色的div必须在窗口宽度的边缘，这是一个更清晰的图像。除了更新原始问题@Sam以更改角度外，您还可以将值

更改为右上

，例如

更改为右下

或度值，然后调整尺寸和位置。。。顺便说一下，我不使用任何发电机。你只需要了解它是如何工作的，你可以做你想做的；）只需阅读文档并使用值即可。谢谢，我在这里看到的问题是内容需要位于

.container

div中，而带有背景的div必须向左全宽延伸。希望这是有道理的。因此，内容不能与div本身的宽度相同，而是限制在引导过程中container@Sam只需删除所有内容，只保留容器/行和一列-*-12，然后在容器上应用此背景；）@Sam添加了一个使用bootstrap的示例；）嗨，对不起，我不清楚我之前的评论内容必须在容器内，但背景颜色的div必须在窗口宽度的边缘，这是一个更清晰的图像。除了更新原始问题@Sam以更改角度外，您还可以将值

更改为右上

，例如

更改为右下

或度值，然后调整尺寸和位置。。。顺便说一下，我不使用任何发电机。你只需要了解它是如何工作的，你可以做你想做的；）只需阅读文档并使用值即可

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