纯做一定的梯形css

Question

假设我有两个 div，如下图（精美）所示。我已经看过了The Shapes of CSS，但是我还没有找到下图中黄色的形状到底是怎么做出来的。是否可以按照上面 link 中描述的类似方式制作黄色形状。

甚至，现在我们进入主题，下图将描述理想情况。这在 css 中或使用其他工具是否可行？（请注意，图片中的曲线并不理想，但也许可以使用不同高度的标准贝塞尔曲线？）

Answer 1

对于问题的第二部分，您可以创建 SVG 剪辑路径，然后在 css 中引用 id。您可以在 HTML 底部看到 SVG。

-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);

这里有关于这两种方法的更多详细信息：https://css-tricks.com/clipping-masking-css/

但请注意，目前对 clip-path 的支持非常有限。

http://caniuse.com/#search=clip-path

div {
  float: left;
  height: 100px;
  width: 130px;
}
.holder {
  position: relative;
}
.top {
  width: 490px;
}
.bottom {
  width: 490px;
  position: absolute;
  left: 0;
  top: 35px;
}
.top-left {
  background-color: aquamarine;
  height: 35px;
}
.top-mid {
  background-color: aquamarine;
  width: 97px;
  -webkit-clip-path: url(#top-path);
  clip-path: url(#top-path);
}
.top-right {
  background-color: aquamarine;
  margin-top: 37px;
  height: 53px;
}
.bottom-left {
  background-color: aqua;
  height: 34px;
}
.bottom-mid {
  background-color: aqua;
  width: 97px;
  -webkit-clip-path: url(#bottom-path);
  clip-path: url(#bottom-path);
}
.bottom-right {
  background-color: aqua;
  margin-top: 55px;
  height: 45px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>SVG Clip Path Shape</title>
</head>

<body>
  <div class="holder">
    <div class="top">
      <div class="top-left"></div>
      <div class="top-mid"></div>
      <div class="top-right"></div>
    </div>
    <div class="bottom">
      <div class="bottom-left"></div>
      <div class="bottom-mid"></div>
      <div class="bottom-right"></div>
    </div>

    <svg width="0" height="0">
      <defs>
        <clipPath id="bottom-path">
          <path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864
 l-6.245,0.32C70.068,55.189,44.218,2.721,14.966,0.68z" />
        </clipPath>
      </defs>
    </svg>

    <svg width="0" height="0">
      <defs>
        <clipPath id="top-path">
          <path fill="#E30613" d="M88.763,36.612C59.511,33.053,45.639,0,13.327,0C9.346,0,0,0,0,0v33.113v1.622l14.966,0.68
 c29.252,2.041,55.102,54.509,76.068,54.503l6.245-0.32V69.847V36.735L88.763,36.612z" />
        </clipPath>
      </defs>
    </svg>
  </div>
</body>

</html>

对于问题的第一部分，我们可以使用 clip-path 每个角坐标都用逗号分隔。

-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

div {
  float: left;
  height: 100px;
  width: 130px;
}
.holder {
  position: relative;
}
.top {
  width: 490px;
}
.bottom {
  width: 490px;
  position: absolute;
  left: 0;
  top: 43px;
}
.top-left {
  background-color: aquamarine;
  height: 43px;
}
.top-mid {
  background-color: aquamarine;
  -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
}
.top-right {
  background-color: aquamarine;
  margin-top: 20px;
  height: 80px;
}
.bottom-left {
  background-color: aqua;
  height: 43px;
}
.bottom-mid {
  background-color: aqua;
  -webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);
  clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);
}
.bottom-right {
  background-color: aqua;
  margin-top: 43px;
  height: 57px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Shape</title>
</head>

<body>
  <div class="holder">
    <div class="top">
      <div class="top-left"></div>
      <div class="top-mid"></div>
      <div class="top-right"></div>
    </div>
    <div class="bottom">
      <div class="bottom-left"></div>
      <div class="bottom-mid"></div>
      <div class="bottom-right"></div>
    </div>
  </div>
</body>

</html>

Answer 2

这是纯css中的第一个形状。您需要使用 perspective.

.shape {
  display: flex;
  margin: 50px;
}
.red,
.green {
  color: white;
  padding: 15px;
  box-sizing: border-box;
}
.green {
  background: green;
  position: relative;
  z-index: 2;
  width: 200px;
  height: 127px;
  margin-top: 45px;
  margin-left: -22px;
}
.red {
  width: 100px;
  background: red;
  height: 56px;
  z-index: 2;
}
.parent {
  position: relative;
  -webkit-perspective: 711px;
  perspective: 711px;
  margin-left: -30px;
  margin-top: 19px;
}
.el {
  width: 200px;
  -webkit-transform: rotateX(-27deg) rotateY(-40deg);
  transform: rotateX(-27deg) rotateY(-40deg);
  height: 65px;
  background: #FFF200;
  position: relative;
  perspective: 350px;
  -webkit-perspective: 350px;
}
.el:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  border-style: solid;
  border-width: 0 200px 70px 0;
  border-color: transparent #FFF200 transparent transparent;
}

<div class="shape">
  <div class="red">Div 1</div>
  <div class="parent">
    <div class="el"></div>
  </div>
  <div class="green">Div 2</div>
</div>

纯做一定的梯形css

Make a certain trapezoidal shape in pure css

html

css

css-shapes