带CSS的半圆矩形

Question

我想知道是否有一种方法可以使用border-radius或其他任何属性来处理以下矩形的边界，请看一下我需要什么：

https://imgur.com/QL7lEd7

到目前为止，这是我使用边界半径得到的：

顶部的矩形是使用Wix创建的，另一个是使用css和html制作的。如您所见，边界是如此不同。

有没有办法做到？

非常感谢

Answer 1

这是可能的，因为您可以在边界半径值内定义每个角，然后将为您提供所需的形状，请参见下面的简单示例，您可以阅读有关其在https://www.w3schools.com/cssref/css3_pr_border-radius.asp上的工作原理的更多信息< / p>

#rcorners {
  border-radius: 4em / 2em;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

<div id="rcorners">Rounded corners!</div>

Answer 2

尝试类似的方法，您想要border-radius: x/y，其中x是您要寻找的拐角处的较高值

.test {
        margin: auto;
        width: 400px;
        height: 100px;
        background-color: blue;
        border-radius: 30%/10%;
    }

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

Answer 3

您可以通过以下方式处理水平和垂直半径：border-radius: 50px/20px;

看这个例子：

div.example {
    background-color: #6495ED;
    padding: 20px;
    margin-top: 10px;
    margin-right: 20px;
    text-align: center;
    border-radius: 50px/20px;
}

<div class="example">Lorem Ipsum.</div>