は、私がこのような形状を作成したいボーダー半径

Question

でカスタムシェイプの作成：

それが画面に収まる必要があり、それが左側にカットする必要があります。

どうすればいいですか？

何私が今持っていることはこれです：

.shape { 
 
     height: 92vw; 
 
     width: 100vw; 
 
     background-color: red; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     border-radius: 92vw 0px 0px 0px; 
 
    }

<div class="shape"></div>

Answer 1

あなたは擬似要素SVGをしないのはなぜ

html, body { 
 
    margin: 0; 
 
} 
 
.shape { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.shape:before { 
 
    content: ''; 
 
    height: 250vh; 
 
    width: 250vw; 
 
    background-color: #ecdbb0; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: -20vw; 
 
    border-radius: 50%; 
 
}

<div class="shape"></div>

Answer 2

私はSVGでそれを解決しました。

ありがとう、andyとfeeela！

html, body { 
 
    margin: 0; 
 
} 
 
#shape { 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<svg id="shape" data-name="Form crop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 928.08"><defs><style>.cls-1{fill:#ecdbb0;opacity:0.6;}</style></defs><title>shape</title><path class="cls-1" d="M2379.69,1551.29V623.21c-603.05,53.25-876.26,317.23-999.59,558.26l-0.41.8v369h1000Z" transform="translate(-1379.69 -623.21)"/></svg>