Discussion :

[d3LTa7]

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

Merci !

[NoSmoking]

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

[d3LTa7]

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

[NoSmoking]

Du coup j'ai fait quelque recherches dessus et ...

Ô comme j'aime lire de telles phrases !