css Une diagonale en CSS

  • Initiateur de la discussion Esteban
  • Date de début
E

Esteban

Invité
Salut le forum,

Je cherche à réaliser un bouton bicolore dont la séparation entre les deux couleurs soit une diagonale.
Je n'ai pas de problème avec le code HTML ni le CSS pour les couleurs
HTML
<div class="btn">
    <div class="btn-left">Valider</div>
    <div class="btn-right">Annuler</div>
</div>
CSS
.btn {
    display: flex;
}

.btn-left {
    background-color: green;
    padding: 5px 10px;
    border: 1px solid grey;
    border-right: none;
}

.btn-right {
    background-color: red;
    padding: 5px 10px;
    border: 1px solid grey;
    border-left: none;
}

Ce qui donne ça
Capture d’écran 2021-02-03 210216.png

Comment obtenir la séparation entre les deux couleurs avec une diagonale plutôt qu'une droite verticale ?
Merci pour votre aide.
 

mikadox

Membre
Hello, peut-être s'inspirer de cette discussion

En modifiant un peu les couleurs de bordure tu devrais y trouver ton bonheur, ça rajoute une div/span pour le bouton mais ce n'est pas gênant.
 
E

Esteban

Invité
Salut les couche-tard !! Merci pour le codepen c'est presque ça, juste que j'aimerais une diagonale moins oblique :p et j'ai beau essayé de manipuler le css du span diag je ne parviens pas à modifier l'inclinaison.

Pour la peine Esteban, tu peux t'inscrire
Salut, je suis inscrit sur tellement de forums que j'en oublie la moitié ! Ici c'est bien on peut poster en tant qu'invité donc pour l'instant ça m'arrange pas mal. Mais ça m'empêche pas de participer si ça me prend, pas de problème. (y)
 

CandyShop

Membre
Victorinox mais dans ce cas cela devient plus ou moins un losange et ses bords vont dépasser du bouton en haut et en bas. Peut-être qu'avec la propriété overflow: hidden; on pourrait régler ce petit souci.
 

Ces discussions pourraient vous intéresser...

Hello, Quand j'essaie de connecter mon fichier PHP à la base de données sur mon serveur local cela ne fonctionne pas. (site WordPress) ERROR ESTABLISHING A DATABASE CONNECTION Pourtant mes éléments sont bons, j'ai vérifié et revérifié. Je vous colle le code du fichier PHP...
Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Haut