在纯净的css中制作一定的梯形形状

时间：2016-10-16 09:28:57

标签： html css css3 css-shapes

假设我有两个div，如下所示（精美）。我已经看了The Shapes of CSS，但我还没有发现下图中的黄色形状究竟是如何形成的。是否有可能以与上述链接中描述的内容类似的方式制作黄色形状。

trapezoidal shape

或者甚至，现在我们关注这个主题，下面的图片将描述理想的情况。这可能在CSS中使用，还是使用其他一些工具？ （请注意，图片中的曲线并不理想，但是标准的贝塞尔曲线可能会有不同的高度吗？）

Final

2 个答案:

答案 0 :(得分：3)

对于问题的第二部分，您可以创建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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

对于问题的第一部分，我们可以使用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%);

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

这是纯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>

相关问题
最新问题