如果可能的话,这是我想使用 html5 和 css 创建的内容:
红色对象是形状,其他一切都必须是透明的,因此背景将是可见的。我想它可以使用 css 蒙版或圆角,但我无法让它工作。
CSS:
.outer{
width: 240px;
background: rgba(0,0,0,0.0);
height:240px;
border-right: 120px solid red;
border-bottom: 30px solid red;
position: relative;
z-index:1;
}
.outer:after {
content: '';
width: 240px;
height:240px;
border-radius: 0px 0px 50px 0px;
-webkit-border-radius: 0px 0px 50px 0px;
-moz-border-radius: 0px 0px 50px 0px;
-o-border-radius: 0px 0px 50px 0px;
-khtml-border-radius: 0px 0px 50px 0px;
background: rgba(0,0,0,0.0);
position: absolute;
top: -30px;
left: -30px;
z-index:2;
border: 30px solid #ccc;
}
HTML
<div class="outer"></div>
这是使用 css 掩码解决此问题的有效解决方案。工作示例。单击左下角的“共享”或“新闻”以查看它的运行情况。从元素 ispector 禁用 #smallScaleHolder 的掩码图像以注意差异。
好的……这里有更好的解释……我做了一个这样的面具……
这是CSS:
-webkit-mask-image: url(../img/sliders/mask.png);
-o-mask-image: url(../img/sliders/mask.png);
-moz-mask-image: url(../img/sliders/mask.png);
mask-image: url(../img/sliders/mask.png);
-webkit-mask-composite: copy;
overflow:hidden;
现在它的所有子元素在黑色区域之外都不可见。
注意:css 掩码仅在 chrome 、 safari 和 ios 中受支持。