html - 如何绘制圆角朝向div内侧的div

Question

如果可能的话，这是我想使用 html5 和 css 创建的内容：

红色对象是形状，其他一切都必须是透明的，因此背景将是可见的。我想它可以使用 css 蒙版或圆角，但我无法让它工作。

Answer 1

编辑：^{[建议透明背景解决方案]}

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>​

一个工作演示

Answer 2

这是使用 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 中受支持。