我需要创建如下图所示的内容：
哪里：
>黑色背景代表页面上的元素,例如标题
>青色背景代表黑色背景下的整体背景
>黑色背景元素必须像单个元素一样对待,因为它上面会有一个图案叠加,它必须保持在黑色元素的边框内,而不是在黑色元素的外部显示
用一些伪元素创建黑色元素是非常容易的,但是在它之上的那个模式已经使整个事物陷入停顿.
我一直在阅读剪辑路径道具.但我不确定我是否能够像这样创建一个复杂的剪辑(或者对我来说似乎很复杂).
整个过程将在iOS应用程序上使用,到目前为止,这个剪辑路径属性似乎与它兼容.
另外要提到的是,黑色元素将具有固定的高度,但必须是其父级的100％宽度.
我认为我会使用svg来逃避,但是因为它需要一个固定的高度,所以当它伸展时它似乎是扭曲的.
更新：
右侧必须保持相同的宽度,我想可能在< g>内部使用两个svgs.标签和绝对位置,一个是流动的,另一个是固定的宽度.但是,我不确定过滤器是否会覆盖它们,或者过滤器是否可以完全应用于< g>.标签,在svg内
以下SVG示例：
body {
background: cyan;
}
svg {
min-width: 100%;
height: 80px;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 452 170" preserveAspectRatio="none"> <rect x="1" y="14" width="438" height="142" /> <path d="M0 0v170h452V0H0zM448 166H4V4h444V166z" /> <rect y="14" width="438" height="142" /> </svg>
任何提示或指示非常感谢！
解决方法
可能是一个更好的解决方案与掩蔽？
#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,linear-gradient(transparent,transparent);
-webkit-mask-size: 5% 100%,5% 100%,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;
}
<div id="test">Transparent frame</div>
固定宽度的方法
用固定值(以像素为单位)替换边框宽度的尺寸.使用calc作为内部矩形.
body,html {
width: 90%;
position: relative;
}
#test {
font-size: 100px;
position: relative;
display: inline-block;
margin: 40px;
width: 100%;
height: 40%;
}
#test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -1;
background: repeating-linear-gradient(45deg,transparent);
-webkit-mask-size: 10px 100%,10px 100%,100% 10px,calc(100% - 40px) calc(100% - 40px);
-webkit-mask-position: left top,center center ;
-webkit-mask-repeat: no-repeat;
}
body {
background-color: lightgreen;
}
<div id="test">Transparent frame</div>
一个椭圆的例子
#test {
font-size: 100px;
position: relative;
display: inline-block;
margin: 40px;
border-radius: 50%;
}
#test:after {
content: "";
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: -1;
border-radius: 50%;
background: repeating-linear-gradient(45deg,tomato 100px);
-webkit-mask-image: radial-gradient(ellipse,red 55%,transparent 56%,transparent 65%,red 66%);
}
body {
background: lightgreen;
}
<div id="test">Transparent frame</div>
