使用border-radius創建自定義形狀

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 { 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> 

Answer 2

您可以使用偽元素

 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>