是否有可能使边界半径表现得像 figma
Is it possible to make a border-radius behave like in figma
是否可以让 css 表现得像 figma 一样,我很难描述,但基本上边界半径会超过中点。
当我告诉他 Css 时,Css 不会那样做 border-radius: 0px 50px 50px 50px;
它停在中间并在左上角平方,有没有办法强制 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;
}
border-radius definition的顺序是得到想要的形状的关键。 shorthand 按顺时针方向从左上角应用到左下角。
.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>
是否可以让 css 表现得像 figma 一样,我很难描述,但基本上边界半径会超过中点。
当我告诉他Css 时,Css 不会那样做 border-radius: 0px 50px 50px 50px;
它停在中间并在左上角平方,有没有办法强制 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;
}
border-radius definition的顺序是得到想要的形状的关键。 shorthand 按顺时针方向从左上角应用到左下角。
.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>