透明な頂点を持つ曲線の部分

Question

私は透明なdivの全幅と高さを境界線を使って500pxの周りに作成しようとしていますが、この種の曲線形状を作成することには問題があります。 例の画像のように、黄色の形になります。

.transparent_bg { 
 
    width: 100%; 
 
    height: 485px; 
 
    background: transparent; 
 
    border:solid 5px #000; 
 
    border-color:#000 transparent transparent transparent; 
 
    border-radius: 50%/200px 200px 0 0; 
 
    transform: rotate(180deg); 
 
    position: relative; 
 
    overflow:hidden; 
 
} 
 

 
.transparent_bg:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 485px; 
 
    position: absolute; 
 
    top: 0; 
 
    background: red; 
 
}

<div class="transparent_bg"></div>

私はこの瞬間まで、私の仕事へのリンクが含まれますが、成功せずにいます。

Answer 1

あなたは（先頭の要素または下1上）の両方の方法でクリップパスを使用して、単純に上部と下部には、このようにオーバーレイすることができます：

.first, 
 
.second { 
 
    display: inline-block; 
 
    margin: 5px; 
 
} 
 

 
.first .top { 
 
    -webkit-clip-path: circle(72.9% at 50% 27%); 
 
    clip-path: circle(72.9% at 50% 27%); 
 
    height: 200px; 
 
    width: 200px; 
 
    background-image: url(https://lorempixel.com/800/600/); 
 
    position: relative; 
 
    z-index: 99; 
 
} 
 

 
.first .bottom { 
 
    margin-top: -70px; 
 
    background: yellow; 
 
    height: 100px; 
 
    width: 200px; 
 
} 
 

 
.second .top { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-image: url(https://lorempixel.com/800/400/); 
 
    position: relative; 
 
    z-index: -9; 
 
} 
 

 
.second .bottom { 
 
-webkit-clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%); 
 
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%); 
 
    margin-top: -70px; 
 
    background: yellow; 
 
    height: 100px; 
 
    width: 200px; 
 
}

<div class="first"> 
 
    <div class="top"> 
 
    </div> 
 
    <div class="bottom"> 
 
    </div> 
 
</div> 
 

 
<div class="second"> 
 
    <div class="top"> 
 
    </div> 
 
    <div class="bottom"> 
 
    </div> 
 
</div>

パスを生成するのに便利なリンクは次のとおりです。

https://bennettfeely.com/clippy/

Answer 2

.transparent_bg { 
 
    width: 100%; 
 
    height: 485px; 
 
    background: transparent; 
 
    border-top-left-radius: 50% 50%; 
 
    border-top-right-radius: 50% 50%; 
 
    transform: rotate(180deg); 
 
    position: relative; 
 
    overflow:hidden; 
 
} 
 

 
.transparent_bg:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 485px; 
 
    position: absolute; 
 
    top: 0; 
 
    background: red; 
 
}

<div class="transparent_bg"></div>