I'm currently experimenting with creating a diagonal div that adjusts its height based on the content within it. While I can extract height values using JavaScript, I am curious if achieving this effect is possible exclusively through CSS.
Thus far, I've managed to craft the desired design and appearance, but it relies on two hardcoded CSS height values -
.content-slice{ min-height: 300px;}
.slice:after {border-top: 300px solid #fff;}
Here's an image depicting my objective - https://i.sstatic.net/seX7N.png
My HTML 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...
</p>
</div>
<div class="col-md-5 col-md-offset-1">
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
My CSS Styles -
.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;
}
View my JSFiddle demonstration here - https://jsfiddle.net/09vywcuj/11/