HTML CSS Slant / bevel

Is it possible to create something like the following in pure html / css? enter image description here

I want to make this foreground and full (100%) width (largest left corner 100px, smallest 50px right, something like that).


source to share

1 answer

You can get the following result by transforming (rotating) multiple divs

<div class="blue"></div>
<div class="green"></div>



.blue {
    background: blue;
    transform: rotate(5deg);
    transform-origin: 0 0;
    width: 110%;
    height: 200px;

.green {
    background: green;
    transform: rotate(-5deg);
    transform-origin: 0 100%;
    width: 110%;
    height: 200px;




All Articles