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 の mask-image を無効にして、違いを確認します。

わかりました...これについてのより良い説明は次のとおりです...私はこのようなマスクを作りました...

そして、ここに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 でのみサポートされています。