Partage

[CSS] Une borture en diagonale

Comme un trapèze, sur seulement un seul coté

Sujet résolu
12 mars 2018 à 9:47:35

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

12 mars 2018 à 13:40:21

Hello,

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

12 mars 2018 à 16:00:46

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 :Dhttps://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

12 mars 2018 à 16:47:32

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

12 mars 2018 à 17:42:21

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

[CSS] Une borture en diagonale

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown