html - Css shape transition - bottom left -


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?

enter image description here

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: 0px top: 0px : after element starts @ top left corner of it's parent .skew element itself.

  • from 22deg -22deg: rotate after element counter clockwise. since transform-origin set top left rotate in way left top corner of after element aligns left top corner of .skew element.

  • from margin-top: 0px margin-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.


-