如何绘制面向div内侧的圆角div

时间:2012-09-05 02:41:57

标签: html5 css3

以下是我想用html5和css创建的内容:

Red object is the shape, everything else has to be transparent, so the background will be visible behind it

红色物体是形状,其他一切都必须是透明的,因此背景将是可见的。 我猜它可以用css面具或圆角,但我不能让它工作。

2 个答案:

答案 0 :(得分:0)

已编辑: [建议的透明背景解决方案]

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

A WORKING DEMO

答案 1 :(得分:-2)

以下是使用css掩码解决此问题的工作方案。 Working example。 单击左下方框中的“共享”或“新闻”以查看其实际效果。从元素ispector中禁用#smallScaleHolder的mask-image以注意区别。

好的......这里有更好的解释...... 我做了这样的面具...... enter image description here

这是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;

现在所有子元素在黑色区域外都不可见。

注意:只有chrome,safari和ios支持css掩码。