Div triangulaire en CSS 100% écran

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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; }
Pièce jointe 596881

Merci !

Bonjour,
il existe plus propre, à mon sens, pour faire ce genre de chose.

Code:

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

30/04/2021, 16h18
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:

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
30/04/2021, 17h45
NoSmoking

Citation:

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

Ô comme j'aime lire de telles phrases !