我怎样才能做一个圆形按钮，一侧是平的，直的？（图片）答案

【问题标题】：How can I do a round button, with one side being even, straight? (Image)我怎样才能做一个圆形按钮，一侧是平的，直的？（图片）
【发布时间】：2018-03-28 05:19:59
【问题描述】：

嘿，问题在标题中：）我希望它像这里的图片一样。有没有办法做到这一点？

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
你必须尝试一下。人们会因为缺乏努力而对你投反对票。堆栈溢出用于帮助解决错误/问题。不做功课会让你迅速投反对票，朋友。

标签： html css ionic-framework sass

【解决方案1】：

你可以使用border-radius: 0px 50% 50% 0px;制作一个单边直的圆形按钮

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style>
i{

}

.btn-group-lg>.btn, .btn-lg {
    padding: 10px 30px;
    font-size: 38px;
    line-height: 1.3333333;
    border-radius: 30px;
}

</style>

<body style="margin-top:50px;">

<div class="container"> 
    <a href="#" class="btn btn-success btn-lg">
      <i class="fa fa-map-pin fa-1x" aria-hidden="true"></i>   |   <i class="fa fa-globe fa-1x" aria-hidden="true"></i>
    </a>
   
</div>
</body>
</html>

【讨论】：

【解决方案3】：

CSS 选择器边框半径允许您为矩形的所有 4 个角设置值。该选择器允许您选择哪些角是圆角的以及它们的圆度。度数由px大小改变，因为那是半圆的半径，所以值越大，角的圆度越大。

.all-four-corners {border-radius: 5px, 5px, 5px, 5px;}
.top-corners {border-radius: 5px 5px 0px 0px;}
.bottom-corners {border-radius: 0px 0px 5px 5px;}
.right-corners {border-radius: 0px 5px 5px 0px;}
.left-corners {border-radius: 5px 0px 0px 5px;}

【讨论】：

【解决方案4】：

您可以使用border-radius 并设置一个值：

.element {
  border-radius:15px;
}

或者您可以为每个角设置特定的值，如上所述。

.element {
  border-top-left-radius: 15px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 25px;
}

【讨论】：

【解决方案5】：

您可以为各个角设置border-radius，例如border-top-right-radius: 0;。

【讨论】：