Séparateur de section polygon clip path

Bonjour à tous,

Je ne sais pas quelle est la meilleur solution pour créer des séparateurs de section comme sur cet exemple :
https://fr.pinterest.com/pin/411375747187065383/

J'ai bien travailler avec clip-path mais uniquement compatible Chrome safari et pour IE FF il faut insérer du SVG dans lequel je ne peux pas utiliser l'unitée %.

Autre idée est d'insérer des img en background mais pas très responsive tout ça.

Bref une idée ?

Salut,


D'ordinaire j'utilise des before after pour générer des bloc mais dans ton cas c'est un peu plus complexe qu'une pente. Du coup je te propose d'ajouter des petits masque svg en absolute. Une forme basique de triangle étirée comme tu le souhaite.

<div class="polygone">
  <svg class="triangle triangle-top" preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0 0, 100 0, 80 100"/>
  </svg>
  
  coucou
  
  <svg class="triangle triangle-bottom" preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0 100, 100 100, 20 0"/>
  </svg>
</div>

body {
  background-color:#FFF;
  margin:0;
  padding:40px 0;
}
.polygone {
  position:relative;
  background:#EEE;
  text-align:center;
  padding:100px 0;
  overflow:hidden;
}
.triangle {
  position:absolute;
  fill:#fff;
  left:0;
  width:100%;
  height:30px;
}
.triangle-top {
  top:0;
}
.triangle-bottom {
  bottom:0;
}

Démo : https://jsfiddle.net/n62yew6w/

(On doit pouvoir les générer en css background dans les before et after mais bon c'est peut etre overkill)

Bonne réflexion
Modifié par _laurent (14 Sep 2016 - 13:18)