Question

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

您可以通过简单地使用填充和背景来简化所有代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

以下是使用bootstrap的示例，您可以在其中添加伪元素以创建溢出部分：

＆＃13;

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

＆＃13;

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

＆＃13;

不使用JS的可扩展角度div

1 个答案: