我需要创建如下图所示的内容:
哪里:
黑色背景表示页面上的元素,header例如
青色背景代表黑色背景下的整体背景
黑色背景元素必须像单个元素一样对待,因为它上面会有一个图案叠加,它必须保持在黑色元素的边框内,并且不会出现在它的外面
只使用一些黑色元素来创建黑色元素将非常容易,:pseudo-elements但是它上面的模式已经使整个事物陷入停顿.
我一直在读clip-path道具.但我不确定我是否能够像这样创建一个复杂的剪辑(或者对我来说似乎很复杂).
整个过程将在iOS应用程序上使用,到目前为止,这个剪辑路径属性似乎与它兼容.另外要提到的是,黑色元素将具有固定的高度,但必须是其父级的100%宽度.我认为我会svg反而使用它,但因为它需要一个固定的高度,它看起来像它的拉伸扭曲.
更新:
右侧必须保持相同的宽度,我想可能在filter会覆盖它们,或者是否filter可以在
以下SVG示例:
body {
background: cyan;
}
svg {
min-width: 100%;
height: 80px;
}
任何提示或指示非常感谢!
可能是一个更好的解决方案与屏蔽？
#test {
font-size: 100px;
position: relative;
display: inline-block;
margin: 40px;
}
#test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -1;
background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
-webkit-mask-image: linear-gradient(red, red),
linear-gradient(red, red),
linear-gradient(red, red),
linear-gradient(red, red),
linear-gradient(red, red),
linear-gradient(transparent, transparent);
-webkit-mask-size: 5% 100%, 5% 100%, 100% 5%, 100% 5%, 80% 80%;
-webkit-mask-position: left top, right top, center top, center bottom, center center ;
-webkit-mask-repeat: no-repeat;
}
body {
background-color: lightgreen;
}Transparent frame这可以通过在这篇CSS Tricks文章中使用Ana描述的方法来实现.
使用CSS剪辑路径:
我们需要做的就是使用polygon剪辑,如下面的代码片段,并将其应用于容器.这样的路径将在最外面的盒子和中间盒子之间的间隙中显示背景图像,在中间盒子和最里面的盒子之间隐藏或剪切背景图像.
div {
height: 200px;
width: 100%;
background: url(http://lorempixel.com/800/200/abstract/6);
}
#css-pattern {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0px 0px, 20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px, 40px 40px, 40px calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) 40px, 40px 40px);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0px 0px, 20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px, 40px 40px, 40px calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) 40px, 40px 40px);
}
/* just for demo */
body {
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}Pure CSS Clip-path with fixed width gap on all 4 sides
京公网安备 11010802040832号 | 京ICP备19059560号-6 