Bonjour, je viens vous voir car depuis quelque j'essaye de crée ou d'avoir un slider en forme de triangle, mais je ne c'est ni comment m'y prendre pour le crée vu que je n'ai trouver aucune base sur internet, ni comment m'y prendre pour le créer moi même.

Savez vous comment faire ?

Quelques idées pour les slider CSS

http://www.css3create.com/spip.php?page=recherche&recherche=slider

ici comment dessiner en css

http://debray-jerome.developpez.com/articles/geometrie-avec-css/

Apres une solution simple un bidouillage tu fait un slider et avec z-index tu dessine un cadre en css qui auras un trou en forme de triangle qui va se placer sur le slider. tordu mais faisable à mon avis

exen a écrit:

Quelques idées pour les slider CSS

http://www.css3create.com/spip.php?page=recherche&recherche=slider

ici comment dessiner en css

http://debray-jerome.developpez.com/articles/geometrie-avec-css/

Apres une solution simple un bidouillage tu fait un slider et avec z-index tu dessine un cadre en css qui auras un trou en forme de triangle qui va se placer sur le slider. tordu mais faisable à mon avis

Merci de ta réponse !! Je suis entrain d'essayer de bidouiller en intégrant des blocs, pour faire le triangle.

Une question qu'elle propriété css utiliser pour placer au mieux les blocs ?

Salut dsl je n'ai pas vraiment eu de temps pour répondre.

tiens je te donne une base pour ton slider, la je suis parti sur une base de mask, ca facilite la chose, par contre là ce n'est pas compatible edge ou ie.

C'est à dire que sous ces deux la tu auras un slider simple.

        <div id="slider">
          <figure>
            <img src="img/1.jpg" alt>
            <img src="img/2.jpg" alt>
            <img src="img/3.jpg" alt>
            <img src="img/4.jpg" alt>
          </figure>
        </div>

Le CSS

.clip-triangle {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}



div#slider {  width: 80%; max-width: 1000px; background-color: red;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);} 

div#slider figure {
  position: relative; 
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}

div#slider figure img { width: 20%; height: auto; float: left; }

div#slider { width: 80%; max-width: 1000px; overflow: hidden }

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}