在 CSS 中塑造和响应？ [关闭]答案

【问题标题】：Shape in css and responsive? [closed]在 CSS 中塑造和响应？ [关闭]
【发布时间】：2015-12-16 21:23:59
【问题描述】：

我有这个形状：

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

我需要图片中完全相同的。

【问题讨论】：

你试过用谷歌搜索 CSS 形状吗？
可能与stackoverflow.com/questions/25445118/…有关
以下链接展示了如何使用 css 创建六边形。 css-tricks.com/examples/ShapesOfCSS
告诉我们，你已经尝试过什么！
我看到大部分都只使用了像素，我想对内部背景做一些改变......

标签： html css

【解决方案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/

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

【讨论】：