Set CSS Polygon angles

Question

I am using CSS clip path to add an angled edge to the top of some containers on my page. The issue I'm having is that these containers have varying amounts of content, and the actual points in the polygon are obviously based on each elements individual height. This means that the actual angle of the container varies from element to element.

As you can see in this fiddle: http://jsfiddle.net/1e7y7mxg/ The two containers share the following clip path, but due to their differing heights, the actual angles of the lines are way different.

clip-path: polygon(0 0, 0 96%, 100% 100%, 100% 4%);

Is there a way to set points to be based on angles from one another? Or, is there another way I could ensure the angles stay the same regardless of height and width?

Thanks!

Answer 1

If i understand right you want the same looking angles on shapes with different a different size?

Then you can set the clip-path values with pixel values, and use calc to get the result you want.

.container {
    -webkit-clip-path: polygon(0 0, 0 calc(100% - 5px), 100% 100%, 100% 5px);
    clip-path: polygon(0 0, 0 calc(100% - 5px), 100% 100%, 100% 5px);
    width: 300px;
    background: red;
    float: left;
    margin-right: 50px;
}

.two {
    background: blue;
}

<div class="container">dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd </div>
<div class="container two">dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd<br> dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd  dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd<br> dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd dsadsads<br> dsadsa<br> ds<br> dsa<br> sadd  </div>