Bonjours,

Je suis actuellement sur la partie connexion d'un site internet, et bloque sur un CSS qui a l'air, en général, simple :/ Je voudrai avoir un sorte de trapèze mais seulement un seul coté.

J'ai donc bien quelque chose y ressemblant, mais c'est pas très propre, et ne renvoi pas la même chose en fonction des navigateur (léger décalage)

Ce que j'ai actuellement (la parti : "j'ai en problème..." en bas a droite)

Le problème c'est que je n'ai pas trouver d'autres solution qui de le faire en 2 div, la propriété "skew" le faisant sur les 2 coté.

Voici le code HTML :

<div class="modal-content onglet p-2">
    <a href="/recuperation" class="btn btn-sm btn-outline-light rounded-050 border-size-2">
        J'ai un problème...
    </a>
</div>
<div class="modal-content ongletPus"></div>

Et le css lié au bouton:

.modal-content.onglet{
    position: absolute;
    background: transparent;
    border-width: 4px 0 0 6px;
    border-color: #77A09E;
    width: auto;
    height: auto;
    transform: rotate(90deg) skewX(-50deg);
    border-radius: 0;
    right: -100px;
    bottom: 82px;
}

.modal-content.ongletPus{
    position: absolute;
    background: transparent;
    border-width: 0 0 4px 0;
    border-color: #77A09E;
    right: -49px;
    bottom: 0;
    width: 50px;
    border-radius: 0;
}

.onglet .btn{
    transform: skewx(50deg);
    position: relative;
    left: 25px;
    bottom: 2px;
    z-index: 1;
}

.rounded-050{
    border-radius: 0.50rem;
}

J'avais bien vu un tuto ou l'on joue avec les bordures, mais a la fin, le texte est placé au dessus de la bordure en question, et donc m'empèche d'en avoir une vrai.

Auriez-vous une solution, et si possible me la montrer ?

Je vous remercie.

-
Edité par Pristio 12 mars 2018 à 9:48:04

Hello,

Plutôt que skew, tu peux te servir des pseudo-elements, comme ça : https://jsfiddle.net/9oL4oLrm/4/

Merci pour ta réponse,

J'avais pensé à cette méthode, mais le problème c'est que je voudrai le fond transparent et une bordure autour, ce que ne permet pas ta méthode qui joue justement sur la grande taille de celles-ci :/

edit : j'ai réussi a faire quelque chose avec ta méthode, ce qui à l'air d'avoir un rendu sympas : https://jsfiddle.net/9oL4oLrm/15/

à tester sur le site, car je sais pas ci ça viens de jsfiddle, ou pas, mais il y a une cassure sur la pointe :/

-
Edité par Pristio 12 mars 2018 à 16:11:15

Hmm, tu peux faire un truc comme ça, en tout transparent, mais c'est un trick un peu dégueu : https://jsfiddle.net/9oL4oLrm/29/

-
Edité par MrChampy 12 mars 2018 à 16:47:57

c'est a presque ce que j'ai fais, et ça marche très bien

Le rendu chez moi est fonctionnel (sur jsfiddle,non, mais c'est surement a cause de la fenêtre modal), mais voila ce que j'ai actuellement : https://jsfiddle.net/9oL4oLrm/32/

Aucun problème avec les navigateur, donc ça me va

Merci pour ton aide.

-
Edité par Pristio 12 mars 2018 à 17:42:29