Élément "penché" en CSS.

Version imprimable

1 pièce(s) jointe(s)

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 :

Pièce jointe 186269

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:

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.

25/08/2015, 11h22
Invité

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

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

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

Code:

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>

25/08/2015, 11h38
Invité

overflow:hidden; est à appliquer sur le conteneur, donc <section>
25/08/2015, 11h54
SamothNitrof
Hélas déjà essayé, le scroll horizontal est toujours présent avec le code que j'ai actuellement :
Code:

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

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:

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:

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

25/08/2015, 21h45
SamothNitrof

Ah, j'allais donner le code mais très bien, je me penche sur le problème et passe en résolu alors, merci beaucoup.