更圆的角 - 边框半径CSS

Question

我想在CSS中实现更多的圆角效果，以获得以下结果：

目前，我的代码如下：

border-radius: 0 400px 0 0;

这将导致：

即使我设置50px或1000px，第二个值也不会改变角落。

是否有一种类似的边框半径呢？

- user9343182

Answer 1

您需要增加边框半径：

.test {
  border: 1px solid black;
  text-align:center;
  
  /* border-top-left-radius: horizontal vertical */
  border-top-left-radius: 50px 20px;
}

<div class="test">
  lorem ipsum
</div>

更多信息

- Pete

---

哇，我这些年肯定完全错过了那个选项。有趣！ - NikxDa

垂直值不应该是 100% 吗？在 div 中有 2 行的情况 - Pandraghon

@Pandraghon 这只是一个例子，他们可以随心所欲地处理它，只是向OP展示如何操作，另外，您的示例不符合OP的要求 - 它需要是一个更平坦的曲线。 - Pete

Answer 2

这里有另一种方法。

.card {
  max-width: 100px;  
  height: 20px;  
  margin: 10px;
  background-color: green;
  border-radius: 150px 100px/75px 0px 0px;
}

<div class="card "></div>

- Tushar Acharekar