使用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>