如何使侧面（左下和右下）具有不同的高度？

Question

我有一个我想要实现的设计，我觉得有点难以描述我的问题。

我试过看变换，但它不是我需要的，因为变换旋转div而不是对角线结束。是否有可能使用其他功能实现这一目标？

Answer 1

你可以使用 CSS3变换skewY（）函数，父值为正值，子包装元素为负值，以实现效果。

查看此演示DEMO

或使用transform: rotate(45deg);来旋转div。

Answer 2

您可以尝试使用形状： -

＆＃13;

＆＃13;

  *{margin: 0px;padding: 0px;}
  .container{width: 240px;margin:45px auto 0;}
.trapezoid {
  width: 0;
  height: 50px;
  border-style: solid;
  border-width:40px 0 40px 240px;
  border-color: transparent;
  border-left-color: black;
  margin-top: -40px;
}
.trapezoid:nth-child(odd){
	 border-color: transparent red transparent transparent;
	 border-width:40px 240px 40px 0;

}

＆＃13;

<div class="container">
    <div class="trapezoid"></div>
    <div class="trapezoid"></div>
    <div class="trapezoid"></div>
    <div class="trapezoid"></div>
    <div class="trapezoid"></div>
</div>

＆＃13;

＆＃13;

＆＃13;