如何使html形状的按钮形状为具有平坦边的椭圆形？

I need a button which looks like this: Required Button Shape

我需要一个看起来像这样的按钮:必需的按钮形状

However my Button's height and width are in percentage. The only way to do this as far as I could find was border-radius to be half of width (to be specified in pixels) and as my button's width is based on percentage of parent's dimensions i don't the exact value. Putting border-radius as 50% gives a terrible shape. Button with 50% border radius

但是我的Button的高度和宽度是百分比。就我所能找到的唯一方法是将border-radius设置为宽度的一半(以像素为单位指定),并且因为我的按钮的宽度是基于父级尺寸的百分比而不是确切的值。将border-radius设为50%会产生可怕的形状。边框半径为50%的按钮

I came with a JavaScript but it requires an event:

我带了一个JavaScript,但它需要一个事件:

function BorderRadius()
{
    var x=document.getElementsByClassName("LoginButton");
    x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}

Is there any way to call this JavaScript function automatically or any other solution, using CSS or JavaScript preferably.

有没有办法自动调用这个JavaScript函数或任何其他解决方案,最好使用CSS或JavaScript。

3 个解决方案

#1

Though you'll need to test this in a few different browsers setting the border-radius to be greater than the button height will give you the rounded corners that you are looking for, at least it does in Firefox.

虽然您需要在几个不同的浏览器中测试这一点,但是将border-radius设置为大于按钮高度将为您提供所需的圆角,至少在Firefox中是这样。

div {
  position: relative;
  height: 300px;
}
button {
  width:33%;
  height:10%;
  border-radius: 999px;
}

<div>
<button>Hello</button>
</div>

An alternative might be using Viewport Units instead of percentages. This can be combined with calc() and px values to give you minimum sizes.

另一种方法可能是使用视口单元而不是百分比。这可以与calc()和px值结合使用,以获得最小尺寸。

Viewport Units:

button {
  width: calc(100px + 15vw);
  height: calc(20px + 5vw);
  border-radius: calc(10px + 2.5vw);
}

<button>Button</button>

#2

Just set the border-radius to fixed value and add line-height with same number.

只需将border-radius设置为固定值,并添加相同数字的line-height。

button {
  border-radius: 20px;
  line-height: 20px;
  background: #ccc;
}

<button>Test button</button>

#3

Sarcoma's answer seems the best solution so far. There is another way too though. I just added onload="BorderRadius()" to the body. It called the function immediately and set the shape.

到目前为止,肉瘤的答案似乎是最好的解决方案。还有另一种方式。我刚刚将onload =“BorderRadius()”添加到正文中。它立即调用函数并设置形状。

#1