html - 如何使用 CSS 创建此形状

Question

红色边框下的形状:

我非常努力地尝试使用 CSS3 来实现这种形状，但一直都失败了。我还尝试添加 border-bottom 和 border-left。查看 CSS 代码以了解我在做什么:

#trapezoid {
  background: blue;
  height: 100px;
  width: 100px;
  margin: auto;
}
#trapezoid:before {
  content: "";
  position: absolute;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  margin: 50px 0px 0px -50px;
  transform: rotate(0deg);
}
#trapezoid:after {
  content: "";
  position: absolute;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  margin: 50px 0px 0px 100px;
  transform: rotate(0deg);
}

<div id="trapezoid"></div>

这个 CSS 形状几乎接近我的要求，但我们不能在扩展区域使用图像。请建议我一些其他方法。 挑战是这样的，我必须创建相同的布局，并且在灰色背景的地方我必须显示一些内容

Answer 1

如果你有纯色背景试试这个

body {
  background: grey;
  margin: 0;
}

.container {
  width: 100%;
  height: 200px;
  background: url("http://lorempixel.com/1000/300/nature/3");
  background-size:cover;
}

.content {
  height: 100px;
  color: #fff;
}

.shape {
  position: relative;
  height: 100px;
  overflow:hidden;
}

.shape:after {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  background: grey;
  top: 0;
  transform: skew(30deg);
  left: -10%;
}

.shape:before {
  content: "";
  position: absolute;
  width: 40%;
  height: 100%;
  background: grey;
  top: 0;
  transform: skew(-30deg);
  right: -10%;
}

<div class="container">
  <div class="content">
    Contents
  </div>
  <div class="shape"></div>
</div>