img par défaut

Un bord en oblique

Mon bord oblique

Si vous voulez réaliser un bord oblique, il existe plusieurs manières de le réaliser en css. Le SVG que j’utilise parfois est une technique possible et très intéressante, d’autant plus qu’il existe aujourd’hui des sites qui proposent de générer la forme que vous voulez. Pour des choses plus simples comme ce que j’ai réalisé ci-dessus, inutile de chercher la complication (sauf qu’il ya quand même une difficulté caché). Le principe est le suivant : Vous créez un bloc en position « relatif » et  dessus un :after en position « absolute ». Vous masquez le premier bloc (overflow:hidden;) et vous transformez ensuite l’inclinaison (  transform: skewY( -3deg); ) du second qui a bien sûr une couleur différente (ici « tomate ») ; N’oubliez pas de régler l’index en css.
La petite astuce c’est de modifier l’origine du bloc :after ( transform-origin: top right;) et de régler sa position haute à zéro ( top: 0px;) .  Ainsi si la taille d’écran change, l’origine reste toujours à la position que vous avez défini. Voici le code que j’ai utilisé :


#bord_oblique{ 
z-index: 2; width: 100%; text-align: center;padding: 4em 0em; 
background: #FFFFE0; position: relative; overflow: hidden;
}
#bord_oblique:after{ 
z-index: 1; content:" ";
position: absolute; background: #FF6347;display: block; 
width: 100%; height: 100%; overflow: hidden; z-index: 1;  
-webkit-transform: skewY( -3deg); transform: skewY( -3deg);
transform-origin: top right; top: 0px;
}
#bord_oblique > h2{ 
z-index: 3;  margin: 0px; position: relative; 
color: #FFFFE0; text-transform: uppercase;
}