Css 如何创建锥形响应div

是否有人知道一种方法，只使用css创建一个响应宽度为倒锥形状的div（请参阅所附的代码片段）。此外，该div需要有一个重复的背景图像（模式）

我尝试使用clipPath：

#div{
身高：100%；
宽度：100%；
-webkit剪辑路径：多边形（50%90px，100%0%，100%100%，01100%，0）；
剪辑路径：多边形（50%25%，100%0，100%100%，0 100%，0 0）；
背景：蓝色；
填充顶部：160px；
}

---

使用带有边值或角值的

线性梯度，而不是固定角度。您也可以通过变换来创建该形状，但这需要JS使其具有响应性



正文{
背景颜色：蓝色；
保证金：0；
填充：0；
}
div{
高度：150像素；
宽度：100%；
位置：相对位置；
}
div:after，div:before{
内容：“；
位置：绝对位置；
身高：继承；
宽度：50%；
}
部门：以前{
左：0；
背景：-webkit线性渐变（至左下角，白色50%，透明50%）；
背景：-莫兹线性梯度（至左下角，白色50%，透明50%）；
背景：-o-线性梯度（至左下角，白色50%，透明50%）；
背景：线性渐变（左下角，白色50%，透明50%）；
}
部门：之后{
右：0；
背景：-webkit线性渐变（至右下角，白色50%，透明50%）；
背景：-莫兹线性梯度（至右下角，白色50%，透明50%）；
背景：-o-线性梯度（至右下角，白色50%，透明50%）；
背景：线性渐变（右下角，白色50%，透明50%）；
}
您可以将div设置为隐藏溢出，然后设置2个带skew的伪元素，每一半一个


.test{
宽度：400px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
.测试：之后，.测试：之前{
内容：“；
位置：绝对位置；
顶部：0px；
宽度：50%；
身高：100%；
}
.测试：之前{
左：0px；
变换：歪斜（15度）；
变换原点：左上角；
背景：重复线性梯度（-15度，白色0px，浅蓝色40px）；
}
.测试：之后{
右：0px；
变换：歪斜（-15度）；
变换原点：右上角；
背景：重复线性梯度（15度，白色0px，浅蓝色40px）；
}
谢谢你的回答，看起来效果不错。但是我仍然需要能够为div设置重复的背景图像，而不是将其背景设置为白色。看起来，没有办法在“线性渐变”中添加重复的图像。@Nit我想不出一种方法，将SVG多边形视为高度和宽度完全响应，包含子元素并具有重复的背景图像。