在CSS中形状和响应？

Question

我有这样的形状：

这是一张图片，但我只需要css和响应，它是否可能？

我需要图像中完全相同的一个。

Answer 1

有一些解决方案。想到的第一个是从多个div构建它并使用skew（）例如：

HTML：

<div class="container">
  <div class="top">
    <div class="skew-left red"></div>
    <div class="skew-right red"></div>
  </div>
  <div class="bottom">
    <div class="skew-left red"></div>
    <div class="skew-right red"></div>
  </div>
</div>

CSS：

.container {
  width: 300px;
  height: 40px;
  position: relative;
}

.red {
  background: red;
}

.top,
.bottom,
.red {
  width: 300px;
  height: 20px;
}

.skew-left,
.skew-right {
  width: 200px;
  height: 20px;
}

.top,
.bottom {
  position: absolute;
  left: 0;
  right: 0;
}

.top {
  top: 0;
  bottom: 20px;
}

.bottom {
  top: 20px;
  bottom: 0;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.skew-left {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  position: absolute;
  right: 0;
  top: 0;
}

.skew-right {
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  position: absolute;
  left: 0;
  top: 0;
}

JSFiddle：https://jsfiddle.net/m0mx4ykh/

还有其他解决方案，其中一些已经在这里讨论过了。在评论中查看其他人给你的链接。