如何创建锥形响应式 div答案

【问题标题】：How to create a responsive div in cone shape如何创建锥形响应式 div
【发布时间】：2015-05-06 05:32:41
【问题描述】：

有没有人知道一种方法来创建一个响应宽度为倒锥形的 div（参见附加的代码 sn-p），只使用 css。此外，这个 div 需要有重复的背景图片（图案）。

我尝试使用 clipPath：

#div {
	height: 100%;
	width: 100%;
	-webkit-clip-path: polygon(50% 90px, 100% 0%, 100% 100%, 0 100%, 0 0);
	clip-path: polygon(50% 25%, 100% 0, 100% 100%, 0 100%, 0 0);
background: blue;
  padding-top: 160px;
}

&lt;div id="div"&gt;&lt;/div&gt;

这在 Safari 和 Chrome 中运行良好，但在 Mozilla、Opera 或 IE 中无法运行。有没有办法针对所有相关浏览器实现？

任何帮助将不胜感激。

【问题讨论】：

@Nit 我想不出办法，将 SVG 多边形在高度和宽度上完全响应，包含子元素并具有重复的背景图像。

标签： css css-shapes clip-path

【解决方案1】：

将linear-gradient 与side 或corner 值一起使用，而不是固定角度。您也可以使用变换来制作该形状，但这需要 JS 使其具有响应性。

Fiddle

body {
    background-color: blue;
    margin: 0;
    padding: 0;
}
div {
    height: 150px;
    width: 100%;
    position: relative;
}
div:after, div:before {
    content:"";
    position: absolute;
    height: inherit;
    width: 50%;
}
div:before {
    left: 0;
    background: -webkit-linear-gradient(to bottom left, white 50%, transparent 50%);
    background: -moz-linear-gradient(to bottom left, white 50%, transparent 50%);
    background: -o-linear-gradient(to bottom left, white 50%, transparent 50%);
    background: linear-gradient(to bottom left, white 50%, transparent 50%);
}
div:after {
    right: 0;
    background: -webkit-linear-gradient(to bottom right, white 50%, transparent 50%);
    background: -moz-linear-gradient(to bottom right, white 50%, transparent 50%);
    background: -o-linear-gradient(to bottom right, white 50%, transparent 50%);
    background: linear-gradient(to bottom right, white 50%, transparent 50%);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

感谢您的回答，这似乎工作正常。但我仍然需要能够为 div 设置重复的背景图像，而不是将其背景设置为白色。看来，没有办法在“线性渐变”中添加重复的图像。

【解决方案2】：

你可以设置div隐藏溢出，然后设置2个倾斜的伪元素，每半个一个

.test {
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.test:after, .test:before {
  content: "";
  position: absolute;
  top: 0px;
  width: 50%;
  height: 100%;
}

.test:before {
  left: 0px;
  transform: skewY(15deg);
  transform-origin: top left;
  background: repeating-linear-gradient(-15deg, white 0px, lightblue 40px);

}
.test:after {
    right: 0px;
  transform: skewY(-15deg);
  transform-origin: top right;
  background: repeating-linear-gradient(15deg, white 0px, lightblue 40px);
  
 }

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：