28172 sujets

CSS et mise en forme, CSS3

Polygone VS triangles CSS

Bonjour, je souhaite pouvoir faire un polygone sur une image en css de ce genre :
[/url] upload/23898-2015-08-10.jpg

En fait il y a une image de fond, sur laquelle deux triangles: un a gauche transparent, un a droite blanc.

J’ai réussi avec les after et before sur le triangle de gauche mais mon problème est de conserver les deux triangles "collés" de façon responsive.


<html>
<style>
body {
    margin:0px;
}
.wrap {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
   background-image: url("43.jpg")
}
.container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height:50%;
    margin: 0 auto;
}
.wrap:before, .wrap:after {
    content:'';
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: white ;
    padding-bottom:10%;
}
.wrap:before {
    right: 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
}
.wrap:after {
    left: 0%;
    -ms-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
}
.wrap2 {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}
.wrap2:before, .wrap2:after {
    content:'';
    position: absolute;
    bottom: 34.5%;
    width: 100%;
    padding-bottom:10%;
}
.wrap2:after {
    right:10%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewXdeg);
}
.wrap2:before {
    left: 90%;
    -ms-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    background-color: white;
}
</style>
</head>
<body>
<div class="container">
    <div class="wrap2"></div>
    <div class="wrap"></div>
</div>
</body>
</html>


Le triangle de droite, de par son bottom avec un pourcentage ne reste pas collé en cas de redimensionnement de l’écran.

Y a t il un moyen de générer une shape de ce genre directement pour n'avoir qu'un seul objet ?

Merci d'avance.
Bonjour.
Ce que vous avez écrit me parait très compliqué et bien long !...
A l'aide d'une photo pompée sur la toile, j'ai écrit la page suivante. Copiez la et testez, peut-être en retirerez-vous quelque chose ?...
<!DOCTYPE html>
<html><head>
     <style type="text/css">
     #container { width: 900px; height: 600px; border: 3px solid Green;
          }
     img  { display: block; width: inherit; height: inherit;
          }
     .triangle { position: relative; z-index:1;
          }
     #triangle_1 {
          border-bottom:160px solid;
          border-left:240px solid;
          border-color: transparent MistyRose;
          margin-top: -600px;
          }
     #triangle_2 {
          border-top: 160px solid;
          border-right: 240px solid;
          border-color: transparent MistyRose;
          margin-top: 280px;
          }
     </style>
</head><body>
     <div id="container">
     <img src="http://i-cms.linternaute.com/image_cms/original/348384-rhinoceros-pret-a-tout.jpg">
     <div id="triangle_1" class="triangle"></div>
     <div id="triangle_2" class="triangle"></div>
     </div>
</body></html>
P.S : Les 2 triangles s'adaptent parfaitement à leur container !...
L'idée est là, il suffit de l'adapter à votre projet... upload/58057-rhino.png
Modifié par ht1cd (19 Aug 2015 - 10:46)
Modérateur
Bonjour,

Pour moi la version la plus simple serait simplement de mettre un background multiple (compatible IE9+) sur #container.
J'ai encodé l'image avec les triangles en base64 pour éviter une requête.

https://jsfiddle.net/m8r0uc89/10/

L’inconvénient serait de ne pas avoir la main (facilement) sur la taille des triangles...
Bonjour, merci pour vos réponses...
La dernière me plait assez, cependant lors de redimensionnement j'ai ca :

upload/23898-2015-08-11.jpg
Modérateur
Effectivement, petit problème Smiley smile
C'est à cause du background-size: contain sur la forme.

Avec une media querie, soit tu changes la propriété de background-size, soit tu augmentes le min-height (plus sûr)... ça devrait fonctionner sans soucis.
Bonjour.
Toujours avec la même technique, mais une autre photo : Votre polygone parfaitement cadré !...
<!DOCTYPE html>
<html><head>
     <style type="text/css">
     #container { width: 900px; height: 600px; border: 3px solid red;
          }
     img  { display: block; width: inherit; height: inherit;
          }
     #polygone {
          position: relative; z-index: 1;
          margin-top: -200px;          
          }
     #masque_1 {
          height: 75px;
          background-color: transparent;          
          border-bottom:75px solid;
          border-left:75px solid;
          border-color: Gray transparent;          
          }
     #masque_2 {
          border-top: 75px solid;
          border-right: 75px solid;
          border-color: transparent Gray;
          margin-top: -153px;
          }
     </style>
</head><body>
     <div id="container">
     <img src=
     "http://www.lepoint.fr/images/2014/08/28/2802377-renault-60851-global-fr-jpg_2431021.jpg">
     <div id="polygone">
          <div id="masque_1"></div>
          <div id="masque_2"></div>
     </div>
     </div>
</body></html>
P.S : Vous pourriez même insérer un titre dans le masque_1...
Pour moi, ce curieux design n'a de sens que si vous y intégrez du texte....
Par ailleurs, j'ai scindé le polygone, afin qu'il soit moins lourd...
Vous pouvez aussi 'jouer' avec la largeur de la bordure, pour modifier l'apparence des triangles... upload/58057-Sanstitre.png
Modifié par ht1cd (12 Aug 2015 - 13:29)
Modérateur
Hello,

Voici une autre proposition... J'aime moins parce qu’il faut créer du contenu HTML vide, mais beaucoup plus facile à maintenir

https://jsfiddle.net/m8r0uc89/11/

Surtout en LESS (ou SASS) :
@triangleSize = 10vw;
@triangleColor = white;

*{
	margin: 0;
	padding: 0;
	border: 0;
}

#container{
	position: relative;
	min-height: 250px;
	height: 50vh;
	background: url("http://i.imgur.com/4FQ6LwN.jpg?1") no-repeat fixed center;

	#masque{
		position: absolute;
		bottom: 0;
		left: @triangleSize;
		right: 0;
		height: @triangleSize;
		background: @triangleColor;

		.triangle{
			position: absolute;
			width: 0;
			height: 0;
			border-bottom: @triangleSize solid @triangleColor;
			border-left: @triangleSize solid transparent;

			&.triangleLeft{bottom: 0; left: calc(-@triangleSize + 1px);}
			&.triangleTop{bottom: @triangleSize; right: 0;}
		}
	}
}
Sujet clos
Aller à