CSS3 - 圆形按钮 - 圆形侧面（水平和垂直）

Question

我想创建一个如下所示的按钮：

是否有办法仅使用CSS创建此按钮，而不使用附加作为背景图像。我尝试过使用border-radius，但无法实现这一目标。

Answer 1

最近我能得到你的是......宽度为410px，高度为294px ......实际图像远远大于这个片段的窗口......祝你好运

＆＃13;

＆＃13;

div{
  width:410px;
  height:294px;
  background:#ed1e79;
  border-radius:45%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

 .ellipseDiv {
   height: 50px;
   width: 100px;
   border: 2px solid #005;
   border-radius: 50px / 25px;
   background-color: #EE5D20;
 }

<div class="ellipseDiv"></div>

那应该能得到你想要的东西。

这个例子是用div制作的，但用按钮就可以轻松完成！

Answer 3

是的，这是可能的。

这是你如何做到的：

.pinkbutton {
    border-radius: 240px / 120px;
    background-color: #ed1e79;
    width : 175.2px;
    height : 126.6px;
}

<div class="pinkbutton"></div>

Answer 4

你必须使用属性border-radius，所以例如它将是

#your-button {
  background-color: some-color;
  border-radius: some-percentage;
}

查看this