html - Css 形状过渡 - 左下角

Question

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

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>

说明

• From bottom: 0px to top: 0px : 这样 after 元素从它父元素的左上角开始这是 .skew 元素本身。

• 从22deg到-22deg:逆时针旋转after元素。由于 transform-origin 设置为 top left 它将以 after 元素的左上角与左侧对齐的方式旋转.skew 元素的顶 Angular 。

• 从 margin-top: 0px 到 margin-top: 100px:因为转换不会改变它周围的其他元素，也不会在转换需要一些时间时腾出空间部分元素超出 View ，需要有足够的边距，以便我们在倾斜元素后可以查看元素。