Creating a box with a "dynamic height" - html

Question

I am looking for a way to create a div with CSS that looks like this graphic:
The bottom on the right is not white but transparent.
How would that be possible?

Answer 1

Method #01:
Use transformed pseudo element i.e :before or :after.
body {
background: #ccc;
}
div {
position: relative;
overflow: hidden;
height: 100px;
}
div:before {
transform: rotate(-3deg);
position: absolute;
background: brown;
height: 100%;
bottom: 40%;
content: '';
right: -50px;
left: -50px;
}
<div></div>
Method #02:
Use css3 linear-gradient.
background: linear-gradient(175deg, brown 60%, transparent 60%);
div {
background: linear-gradient(175deg, brown 60%, transparent 60%);
height: 100px;
}
<div></div>

Answer 2

You can use transformations. Here is an example.
#me {
margin-left:-100px;
margin-top:-100px;
width:150%; height:200px;
color:#FFF;
background-color:#8B1414;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#wrapper {
min-height:200px; background-color:#000; padding:20px; overflow:hidden;
}
<div id="wrapper">
<div id="me">asdf</div>
</div>

Answer 3

You can use a linear-gradient background. This would work like this:
<div class="box">
</div>
.box {
width: 700px;
height: 100px;
background: linear-gradient(to left top, transparent 50%, red 50%)
}
Or you could use CSS transform to rotate the box. How to do this you can see here

Answer 4

You haven't specified if the width is constant, so I'll assume it is not (responsive design?) and I also assume, that you want to have a constant angle independently on the width of the <div></div>.
To achieve this you will, however need to use SASS with some math-enhancing libraries (ie. Compass, Sassy-Math). These will give you the pow(), sqrt(), and sin() functions necessary for the Pythagorean calculations.
Here is the basic function that will calculate the height of the tilted edge depending on the angle you want the tilt to take.
#function get-tilted-height($angle) {
$a: (100% / 1%);
$A: (90deg - $angle);
$c: ($a / sin($A));
$b: sqrt(pow($c, 2) - pow($a, 2));
#return (abs($b) * 1%);
}
Now for the SASS mixin.
#mixin tilted($angle, $color, $position: 'top', $pseudo: 'before') {
$height: get-tilted-height($angle);
position: relative;
background-color: $color;
&::#{$pseudo} {
content: '';
padding-top: $height;
position: absolute;
left: 0;
right: 0;
#if ($position == 'top') {
bottom: 100%;
background-image: linear-gradient($angle, $color 50%, transparent 50%);
} #else {
top: 100%;
background-image: linear-gradient($angle, transparent 50%, $color 50%);
}
}
}
Then you just include the mixin in your code like this:
.container {
#include tilted(3deg, rgb(255, 255, 255), bottom);
padding: 0 1em;
max-width: 80%;
margin: 0 auto;
filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));
}
Note the position: relative that the container aquires, so then we can position the ::after pseudo-element absolutely. Also the height of the tilt is defined by padding-top as you can't rely on height that is computed from the parents height.
My credit goes to Hugo Giraudel and his brilliant article on Sitepoint, which I recommend you to read to find out more details. And here is a link to CodePen where you can see it in action: http://codepen.io/SitePoint/pen/dppJzX

Answer 5

You can also do this way.
.container{
position:relative;
width:100px;
height:40px;
overflow:hidden;
background-color:transparent;
}
.child{
position:absolute;
top:-40px;
left:-30px;
width:150px;
height:60px;
background-color:#8D120D;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
<div class="container">
<div class="child">
</div>
</div>