javascript - 不使用 JS 的可扩展 Angular div

Question

我正在尝试创建一个 Angular 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>

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

您可以通过简单地使用填充和背景来简化所有代码，如下所示:

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>

或者像这样，以防你需要保持透明:

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>

这是一个使用 bootstrap 的示例，您可以在其中添加一个伪元素来创建溢出部分:

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>