Css 形状过渡 - 左下角

Question

我是 css 变换样式的新手。所以我没弄清楚这件事。我玩过这段代码。但它在右侧有一个角。但我需要左侧的角形状。像这样。我该如何创建它？或针对这种情况的任何其他方法？

div {
  float: left;
  height: 100px;
  width: 200px;
  margin: 50px;
  color: beige;
  transition: all 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>

Answer 1

div {
  float: left;
  height: 100px;
  width: 200px;
  margin: 50px;
  color: beige;
  transition: all 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>

说明

从 bottom: 0px 到 top: 0px ：因此 after 元素从其父元素的左上角开始，即 .skew 元素本身。
从22deg到-22deg：逆时针旋转after元素。由于 transform-origin 设置为 top left，它将以 after 元素的左上角与 .skew 元素的左上角对齐的方式旋转。
从margin-top: 0px到margin-top: 100px：因为变换不会改变它周围的其他元素，或者当变换从元素中取出某些元素时space视图，必须有足够的边距，以便我们可以在倾斜后查看元素。

Css 形状过渡 - 左下角

Css shape transition - bottom left

html

css

css-transforms

说明