css - 是否可以使边界半径的行为像 figma

Question

是否有可能让 css 表现得像 figma 一样，我很难描述，但基本上边界半径会超过中间点。

当我告诉他border-radius: 0px 50px 50px 50px;它停在中间并与左上角成正方形时，css 的行为不是那样，有没有办法强制css 表现得像图像一样

我猜的代码

html:

<div class="decoracaoInfo1" id="decoracaoInfo1"> </div>

CSS：

.decoracaoInfo1{
    width: 397px;
    height: 25px;
    background: rgba(53, 92, 175, 0.6);
    border: 1px solid rgba(53, 92, 175, 0.0); 
    border-radius: 50px;/*0px 100px 100px 100px;*/
    border-top-left-radius: 0px !important;
    z-index:5;
    position: absolute;
}

Answer 1

边界半径定义的顺序是获得所需形状的关键。顺时针从左上角到左下角应用速记。

.shape {
    width: 397px;
    height: 25px;
    background-color: rgba(53, 92, 175, 0.6);
    border-radius: 0 12.5px 12.5px 25px;
}

<div class="shape"></div>