Css形状过渡 - 左下角

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<div class="skew bottom">Some content</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

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*/
}

＆＃13;

<div class="skew bottom">Some content</div>

＆＃13;

＆＃13;

＆＃13;

解释

• 从bottom: 0px到top: 0px：以便after元素从其左上角开始，其父级是.skew元素本身。

• 从22deg到-22deg：逆时针旋转after元素。由于transform-origin设置为top left，因此它会以after元素的左上角与.skew元素的左上角对齐的方式旋转。< / p>

• 从margin-top: 0px到margin-top: 100px：因为转换不会更改其周围的其他元素，或者当转换将某个元素的某些部分从视图中移出时会产生空间，因此它是必须有足够的余量，以便我们可以在倾斜后查看元素。