使用border-radius创建自定义形状

Question

我想创建一个这样的形状：

它应该适合屏幕，应该在左侧切割。

我该怎么做？

我现在拥有的是：

＆＃13;

＆＃13;

for ($i = 0; $i < $count; $i++) on line 32

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我用SVG解决了这个问题。

感谢andy和feeela！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>