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

-3

嘿问题是在标题:)我希望它像这里的图片。有什么办法可以实现吗？我怎样才能做一个圆形的按钮，一边是平直的？（图片）

2017-10-16 Caturix99

欢迎堆栈溢出！预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，做出尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

你必须尝试一下。人们会因为缺乏努力而使你失望。堆栈溢出是为了帮助解决错误/问题。不做你的功课会让你迅速变得低调，朋友。 –

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

来源

2017-10-16 16:08:56 Tom

您可以设置为border-radius个别边角，像border-top-right-radius: 0;。

来源

2017-10-16 16:05:39

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

来源

2017-10-16 16:10:34

的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;}

来源

2017-10-16 16:22:11

你可以做一个圆形按钮，oneside直使用border-radius: 0px 50% 50% 0px;

来源

2017-10-16 17:20:13

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

回答

相关问题

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