Question

嘿问题在标题:)我希望它像在这里的图片。有没有办法实现这个目标？

Answer 1

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

Answer 2

您可以使用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;
}

Answer 3

<!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>

Answer 4

CSS选择器border-radius允许您设置矩形的所有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;}

Answer 5

您可以使用border-radius: 0px 50% 50% 0px;

直接制作圆形按钮

我怎么能做一个圆形按钮，一边是平直的？（图片）

5 个答案:

我怎么能做一个圆形按钮，一边是平直的？ （图片）

5 个答案:

我怎么能做一个圆形按钮，一边是平直的？（图片）