Discussion :

[SamothNitrof]

Bonjour,

J'ouvre ce sujet car après un certain temps à me pencher sur un problème, je n'arrive toujours pas à fixer celui-ci !

En effet, j'aimerais créer un effet sur un site internet, ressemblant à la partie orange de ce template de site trouvé sur TemplateMonster :



Vous l'aurez compris, je cherche à créer un effet d'élément "penché".

Mais lorsque j'essaie ceci, avec les éléments CSS de ce template, soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
    content: '';
    width: 150%;
    height: 500px;
    background: #009587;
    position: absolute;
    left: -100px;
    z-index: 1;
    transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg);

sur l'élément en question, il y a un bout qui "dépasse" de l'écran et créé donc un scroll horizontal indésirable, même lorsque j'y ajoute un "overflow: hidden;".

Avez-vous des idées, s'il vous plaît ?

Cordialement.

[Invité]

Bonjour,
tout dépend où tu mets overflow:hidden;.

Mais vu que tu ne donnes pas le code HTML associé...

[SamothNitrof]

Voici grossomodo le code HTML, où j'ai renommé la classe concernée par "elementpenche" pour plus de clarté.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<main>
                ...
		<section>
			<div class="content-section">
				<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos molestias sequi repudiandae cupiditate nemo placeat, omnis. Maiores est repellendus suscipit quos minus numquam sint dicta ipsa debitis necessitatibus, eaque laborum.</div>		
			</div>
                        <span class="elementpenche"></span>
		</section>
                ...
</main>

[Invité]

overflow:hidden; est à appliquer sur le conteneur, donc <section>

[SamothNitrof]

Hélas déjà essayé, le scroll horizontal est toujours présent avec le code que j'ai actuellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
section {
	width: 100%;
	overflow: hidden;
	padding: 90px 0 45px 0;
	line-height: 45px;
}

[Invité]

Pour l'instant, tu montres des bouts de codes éparpillés.

Quand tu auras vraiment besoin d'aide, tu nous montreras :

• le code CSS
• le code HTML associé

le tout nécessaire et suffisant pour visualiser et tester l'ensemble.

Ceci fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<main>
	...
	<section class="content-section">
		<div class="elementpenche"></div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos molestias sequi repudiandae cupiditate nemo placeat, omnis. Maiores est repellendus suscipit quos minus numquam sint dicta ipsa debitis necessitatibus, eaque laborum.
		</div>		
	</section>
	...
</main>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.content-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 45px 0;
    line-height: 45px;
}
 
.content-section .elementpenche {
    content: '';
    width: 150%;
    height: 500px;
    background: orange;
    position: absolute;
    top: -400px;
    left: -100px;
    z-index:-1;
    -ms-transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg);
}