有谁知道仅使用 css 创建具有响应宽度的倒锥形 div 的方法(请参阅随附的代码片段)。此外,此 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;
}
<div id="div"></div>
这在 Safari 和 Chrome 中运行良好,但在 Mozilla、Opera 或 IE 中不起作用。 有没有办法实现所有相关浏览器?
如有任何帮助,我们将不胜感激。
最佳答案
使用 linear-gradient
和 side 或 corner 值而不是固定 Angular 。您也可以使用转换来制作该形状,但这需要 JS 才能使其响应。
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%);
}
<div></div>
关于css - 如何创建一个圆锥形状的响应式 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28867834/