Clever Geek Handbook

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).

+3


source to share


1 answer


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

https://jsfiddle.net/6hyrt8ck/

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


CSS

.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;
}
+4


source






More articles:


All Articles