i'm new css transform styles. failed figure out matter. i've played code. have corner on right side. need corner shape in left side. way. how can create that? or other methods kind of situations?
div { float: left; height: 100px; width: 200px; margin: 50px; color: beige; transition: 1s; } .skew { padding: 10px; position: relative; background: tomato; } .skew:after { position: absolute; content: ''; background: inherit; z-index: -1; } .skew.bottom:after { width: 100%; height: 80%; } .skew.bottom:after { bottom: 0px; left: 0px; transform-origin: top left; transform: skewy(22deg); } .skew.bottom { margin-top: 10px; }<div class="skew bottom">some content</div>
div { float: left; height: 100px; width: 200px; margin: 50px; color: beige; transition: 1s; } .skew { padding: 10px; position: relative; background: tomato; } .skew:after { position: absolute; content: ''; background: inherit; z-index: -1; } .skew.bottom:after { width: 100%; height: 80%; } .skew.bottom:after { top: 0px; /*changed this*/ left: 0px; transform-origin: top left; transform: skewy(-22deg);/*changed this*/ } .skew.bottom { margin-top: 100px; /*increased this*/ }<div class="skew bottom">some content</div>explanation
from
bottom: 0pxtop: 0px:afterelement starts @ top left corner of it's parent.skewelement itself.from
22deg-22deg: rotateafterelement counter clockwise. sincetransform-originsettop leftrotate in way left top corner ofafterelement aligns left top corner of.skewelement.from
margin-top: 0pxmargin-top: 100px: because transforms not change other elements around or make space when transformation takes part of element out of view, it's necessary have enough margin can view element after skewing it.
