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

如果可能的话，我想使用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掩码解决此问题的有效方法。 单击左下框中的“共享”或“新闻”以查看其运行情况。从element 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中受支持。

为什么不使用图像？我理解这里的挑战，但这有什么实际用途，而不是10倍于图像的简单操作？我必须画一个将溢出隐藏的对象，这样当其中的对象（其子对象）移动到左侧时，它们在div之外就看不见了。这有意义吗？@hjuster：在我的回答中看到下面的示例，希望这会有很大帮助。不过，这并不能提供一个透明的背景，这是问题中所要求的。@joshnh：根据OP的要求更新：）啊，这仍然不是一个透明的背景解决方案：这不好，因为子元素在.outer元素的边界之外是可见的。看看我的答案，看看想要的效果。请不要只是链接到一个实时网站。发布相关的标记和CSS，使您的解决方案具有一定的价值。