<style>
div {
width: 200px;
height: 200px;
}
#div1_back {
background-color: red;
margin-left:40px;
margin-top:40px;
transform: rotate(-30deg);
overflow: hidden;
}
#div2_back {
background-color: green;
transform: rotate(30deg);
}
#div1 {
background-color: red;
margin-left:40px;
margin-top:40px;
transform: rotate(-30deg);
filter: hue-rotate(100deg);
}
#div2 {
background-color: green;
transform: rotate(30deg);
}
</style>
<div style="position:absolute">
<div id="div1_back">
<!-- This blocks should be overlaid by the second set of blocks. -->
<div id="div2_back">
</div>
</div>
</div>
<div style="position:absolute">
<div id="div1">
<!-- This paragraph will have a filter applied. -->
<div id="div2">
</div>
</div>
</div>