Comment est-ce que je peux faire un bouton rond, avec un côté étant même, droit? (Image)

-3

Hey question est dans le titre :) Je veux que ce soit comme sur la photo ici. Y a-t-il un moyen d'accomplir cela?Comment est-ce que je peux faire un bouton rond, avec un côté étant même, droit? (Image)

Source

2017-10-16 Caturix99

Bienvenue sur Stack Overflow! On s'attend à ce que vous essayiez au moins de le coder pour vous-même. Stack Overflow n'est pas un service d'écriture de code. Je suggère que vous fassiez un peu de [** recherche supplémentaire **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , soit via Google ou en cherchant SO, faire une tentative et. Si vous avez encore des problèmes, revenez avec ** votre code ** et expliquez ce que vous avez essayé. –

Vous devez l'essayer. Les gens vont vous downvote pour le manque d'effort. Stack Overflow est pour aider avec des bugs/problèmes. Ne pas faire tes devoirs t'obtiendra des downvotes rapides, mon ami. –

Vous pouvez utiliser border-radius et définir une valeur:

.element { 
    border-radius:15px; 
}

Ou vous pouvez définir des valeurs spécifiques pour chaque coin, comme mentionné ci-dessus.

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

Source

2017-10-16 16:08:56 Tom

Vous pouvez définir border-radius pour les coins individuels, comme border-top-right-radius: 0;.

Source

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>

Source

2017-10-16 16:10:34

Le sélecteur CSS border-radius vous permet de définir la valeur pour tous les 4 coins d'un rectangle. Ce sélecteur vous permet de sélectionner les coins arrondis et le degré de rondeur qu'ils ont. Le degré est modifié par la taille px, car c'est le rayon du demi-cercle, donc plus la valeur est grande, plus la circularité des coins est grande.

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

Source

2017-10-16 16:22:11

vous pouvez faire un bouton rond avec oneside en utilisant directement border-radius: 0px 50% 50% 0px;

Source

2017-10-16 17:20:13

Comment est-ce que je peux faire un bouton rond, avec un côté étant même, droit? (Image)

Répondre

Questions connexes