Object pour création d'effet en biais SVG

by oilvier

HTML

<div class="skew skew--example">
    <div class="svg svg--bottom">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 120" preserveAspectRatio="none">
            <polygon fill="#353535" stroke="#353535" stroke-width="5" points="600,120 2000,0 0,0"/>
        </svg>
    </div>
    <div class="example">Test</div>
</div>

<div class="skew skew--example">
    <div class="svg svg--bottom">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 120" preserveAspectRatio="none">
            <defs>
          <clipPath id="crop">
           <polygon points="594,116 2040,-4 -24,-4"/>
          </clipPath>
        </defs>
            <polygon fill="#353535" stroke="#353535" stroke-width="20" points="600,120 2000,0 0,0" clip-path="url(#crop)" />
        </svg>
    </div>
    <div class="example">Test</div>
</div>
<br><br><br>
<div class="skew skew--example">
    <div class="svg svg--bottom">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 120" preserveAspectRatio="none">
            <polygon fill="#353535" stroke="#353535" stroke-width="5" points="600,120 2000,0 0,0" />
        </svg>
    </div>
    <div class="example">Test</div>
</div>
<br>

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 1125" preserveAspectRatio="none">
   <defs>
    <clipPath id="cut-off">
     <polygon points="0,0 1035,1125 0,1125"/>
    </clipPath>
  </defs>
  <polygon fill="#b8dfed" stroke="#b8dfed" stroke-width="10" points="0,0 1035,1125 0,1125" clip-path="url(#cut-off)" />
</svg>

CSS

/**
 * Utilisation de SVG pour les effets de bloc en biais
<div class="skew">
	<div class="svg">
		<svg preserveAspectRatio="xMinYMin meet"></svg>
	</div>
</div>
 * Reste à définir un `padding-bottom` sur `.svg {}` en fonction des dimensions du biais à réaliser
 * Possibilité d'afficher un biais en haut et en bas avec les classes `.svg--bottom {}` et `.svg--top {}`
 * [1] À passer en `display:block;` si besoin de créer une marge avec le bloc précédent/suivant
 * `.skew:before {}` et/ou `.skew:after {}` devront avoir le même padding que le `.svg {}` correspondant
 */
.skew {position:relative;}
.skew:before,
.skew:after {content:""; display:none; /* [1] */ width:100%; height:0;}
	
	.skew .svg {position:absolute; left:0; right:0; height:0;}
		.skew .svg svg {display:block; position:absolute; top:0; right:0; width:100%;}

/* Ajout d'une flèche sous l'effet de biais */
.skew--tip .svg--top:after,
.skew--tip .svg--bottom:after {content:""; display:none; position:absolute; top:50%; right:50%; border:0 solid transparent; border-width:10px 12px 0; transform:translateX(-50%);}

/**
 * Pour notre exemple
 * [1] On créé un espace fantôme pour que le biais du haut ne passe pas par dessus le bloc suivant.
 */
.skew--example:before {display:block;}
.skew--example:before,
.skew--example .svg {padding-bottom:2.5%; /* [1] */ z-index:2;}
	.skew--example .svg--top {top:0; padding-bottom:2.5%; /* [1] */}
	.skew--example .svg--bottom {top:100%; padding-bottom:1.25%; /* [1] */}





/* Reset */

   *, 
   	*:before, 
   	*:after {box-sizing: border-box;}

* {margin:0; padding:0;}

.example {padding:20px; text-align: center; background:#353535; color: #FFF;}