Triangles en background

4 février 2020 à 23:00:45

Bonjour,

En ce moment je m’entraîne à créer un site internet avec du html et css. Malheureusement je bloque actuellement :

-Mon objectif est de mettre les 4 triangles en fond de page et qu'ils occupent toute la place de la page internet ( en mode background )

-Actuellement je n'arrive pas a : 1- Centrer les 4 triangles ( c'est un carré en fait )

2- Lui faire occuper toute la place de la page internet

Si vous avez le temps, j'ai une question a vous poser : Pourquoi la page ne donne pas le même résultat sur Chrome que sur Internet Explorer ?

Ma page html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="images/favicons/photo_cam.jpg" type="image/x-icon">
    <link rel="stylesheet" href="style.css" />
    <title>Profils </title>
    

</head>
<body>
	<div class="conteneur">

		<div class="Loic">
			<img src="images/Loic.jpg" alt=""/>
			<div class="TexteLoic">
				<a href="" class="L">Loïc</a>
				<p> 
					TEXTE </br>
					TEXTE </br>
					TEXTE </br>
				</p>
			</div>
		</div>



		<div class="Germain">
			<img src="images/GG.jpg" alt=""/>
			<div class="TexteGermain">
				<a href="" class="G">Germain</a>
				<p>
					TEXTE </br>
					TEXTE </br>
					TEXTE </br>
				</p>
			</div>
		</div>

		
		<div class="Antoine">
			<img src="images/Antoine.jpg" alt=""/>
			<div class="TexteAntoine">
				<a href="" class="A">Antoine</a>
				<p> 
					TEXTE </br>
					TEXTE </br>
					TEXTE </br>
				</p>
			</div>
		</div>
	</div>

	<div class="test">
		<div class="contener_du_triangle"> </div>
	</div>


</body>
</html>

Ma page css :

.Loic, .Germain, .Antoine {
    text-align: center;
    border: 1px black solid;
    padding: 60px 60px 60px 60px;
    box-shadow: 6px 6px 6px black;
    background-color: white;
}



.conteneur {
    display: flex;
    justify-content: space-around;
    margin-top: 10%;
}

.triangle {
	width: 0;
	height: 0;
	background-color: white;
    border-top: 940px solid orange;
    border-bottom: 940px solid green;
    border-left: 940px solid yellow;
    border-right: 940px solid black;
}

.contener_du_triangle {
	display: flex;
   	justify-content: center;
   	margin-top: 0%;
   	margin-bottom: 100%;

}
html{
	max-width: 100%;
	max-height: 100%;
}

Merci pour l'attention que vous allez apporter à cette demande d'aide !

-
Edité par IteWaseMi 4 février 2020 à 23:05:39

AlainPré

5 février 2020 à 18:02:47

Impossible de comprendre cette histoire de triangles.
Il y a bien une classe .triangle dans le CSS mais qui ne correspond à aucune balise.

Et il n'y aucun lien vers des images qui pourraient être les triangles.

Le code ne doit pas être complet.

Et de mon coté j'ai un rendu comparable entre Chrome et IE.

Alain - Linkedin

Aelya

5 février 2020 à 18:31:02

Hello,

Alors il y a parfois une différence entre les codes css sur les différents navigateur (parfois des paramètres supplémentaires) qui leurs sont propre en plus du css "classique". Si tu est perfectionniste et que tu veux faire un truc optimisé et propre pour tout les navigateurs va falloir te documenter et faire des tests, c'est du temps^^ (fin perso si c'est que IE je m'embêterais pas, c'est pas comme si c'était très utilisé :p)

Après comme dit AlainPréla classe triangle n'apparait nul par dans ton html, après s'il s'agit d'un background tu as l propriété background-size:cover si tu veux contraindre ton image couvrir ton conteneur mais pas sur d'avoir compris.

-
Edité par Aelya 5 février 2020 à 18:38:42

IteWaseMi

9 février 2020 à 23:11:59

Ok merci je vais regarder ça