IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Div triangulaire en CSS 100% écran


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut Div triangulaire en CSS 100% écran
    Bonjour

    J'aimerais réaliser proprement des div triangulaire pour casser un peu les lignes droites des sites en générale ^^

    Du coup le résultat est pas mal sauf que niveau largeur j'ai un peu de mal à gérer car ça dépasse de l'écran et j'ai une scroll barre en bas...

    Mais chez moi j'ai toujours la scroll barre malgré le réglage en 100vw

    Je précise que les 2 div .tri et .trih1 sont des div totalement vide


    div normale + div triangle en header :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    .container-header{
        display: flex;
        flex-direction: column;
        align-items: center;
        background: chocolate;
    }
    .tri{
        height: 0;
        width: 100%;
        border-right: 100vw solid transparent;
        border-top: 100px solid chocolate;
    }
    div normale + div triangle en dessous (en blanc)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    .trih1{
        border-bottom : 250px solid white;
        border-left : 100vw solid transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .perso-glob{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background: white;
    }
    Nom : tri.PNG
Affichages : 84
Taille : 42,1 Ko

    Merci !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 763
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 763
    Points : 40 046
    Points
    40 046
    Par défaut
    Bonjour,
    il existe plus propre, à mon sens, pour faire ce genre de chose.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .tri{
      height: 100px;                              /* la hauteur de ta bordure */
    /*  width: 100%;                              /* pas utile, valeur par défaut --*/
    /*  border-right: 100vw solid transparent;    /* Out */
    /*  border-top: 100px solid chocolate;        /* Out */
      background: chocolate;
      clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
    }
    tu peux même faire bien plus biscornu

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut
    Hannnnn !! C'est vraiment chouette !! Merci beaucoup !! C'est dingue tout ce qu'il est possible de faire en CSS et que je ne connais pas !!

    Du coup j'ai fait quelque recherches dessus et pour un triangle c'est même un peu plus simple !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    .trih1{
        background:  white;
        height: 120px;
        clip-path: polygon(0 0,0 100%,100% 0);
    }
    En tout cas merci pour cette découverte

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 763
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 763
    Points : 40 046
    Points
    40 046
    Par défaut
    Du coup j'ai fait quelque recherches dessus et ...
    Ô comme j'aime lire de telles phrases !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. pb div variable et css
    Par fey dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 02/11/2007, 11h53
  2. 2 Divs de largeur 50% à 100% de la page
    Par drazielus dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 26/03/2007, 19h48
  3. Soucis avec des DIV et un CSS
    Par Rifton007 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 23/01/2007, 16h31
  4. div au milieu de l'écran
    Par crakocrako dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 28/02/2006, 16h11
  5. [CSS]Aligner les div suivant la résolutation d'écran
    Par nebule dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/09/2005, 12h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo