Coin biseau en diagonale segment oblique

Bonjour,

J'ai <span> qui englobe 1 mot et lui donne une couleur de fond.

Exemple :

<span>Mot</span>

span {
display:inline;
background: #000;
color: #fff;
font-size: 20px;
padding: 5px 10px 5px 10px;
line-height: 20px;
}

Est-ce possible d'ajouter un biseau au début ou à la fin du carré de manière à "biseauter" cette forme ?

Voir le rendu souhaité en image
Modifié par poilozorey (06 Apr 2015 - 20:39)

Bonjour,

Bon normalement on est pas censés faire le boulot à la place des utilisateurs, mais pour le coup c'était plus rapide de le coder pour d'expliquer ensuite, tadaa : http://codepen.io/inpixelitrust/pen/ragwOR?editors=110

span {
  background: black;
  color: #fff;
  position: relative;  
  padding: 10px;
}

span:before {
  content: " ";
  background: black;
  position: absolute;
  top:0;
  left:-10px;
  right:-10px;
  bottom:0;
  z-index: -1;
  transform: skewX(-15deg);  
}

En fait l'astuce consiste à créer un "faux" rectangle en fond dans un pseudo élément en dessous de ton mot que l'on va tordre avec une transformation CSS3. L'avantage : on garde le biseau quelque soit la longueur du mot

Je pense qu'il y a une autre solution possible ça serait de mettre un fond noir et de créer deux triangles pour simuler le biseau, un dans un before et un dans un after.

En tout premier, merci
C'est tout frais servi sur un plateau et en + c'est expliqué "tout bien com'y faut" !!
Donc, dans un monde ou la gentillesse ce fait rare je souligne ton geste et te remercie encore une fois

Petit problème par contre coté pratique, j'essaye sur un template utilisant bootstrap et ca coince.

En gros, rien ne change sauf si je désactive (via firebug) le

    z-index: -1; 

Lorsque je désactive z-index, le biseau ce crée, mais le texte disparait, si je laisse le z-index, le texte est présent, mais le biseau n’apparait plus.

<div class="titre-biseau"><span>Le Mot</span></div>

.titre-biseau {
    border-bottom: 1px solid #e1358d;
    padding:0;
    margin:20px 0 10px 0;
    line-height:0;
    height:31px;
}
.titre-biseau span {
   display:inline;
   background: #e1358d;
   color: #fff;
   font-size: 20px;
   padding: 5px 10px 5px 10px;
   font-family:"Arial",sans-serif!important;
   font-weight:400;
   text-transform:uppercase;
   text-shadow: 0 1px 1px #3d3d3d;
   line-height: 20px;
   position: relative; 
   /* optionnel */
   display: inline-block;
   margin-left: 30px;
}
.titre-biseau span:before {
   content: " ";
   background: #e1358d;
   position: absolute;
   top:0;
   left:-10px;
   right:-10px;
   bottom:0;
   z-index: -1;
   transform: skewX(-15deg);
}

Je ne comprend pas pourquoi ca "couinne"...néanmoins merci encore pour la solution apportée.
Il faudrait que j'essaye avec des triangles, mais n'est pas réussi à comprendre comment procéder

En fait il y a besoin du z-index pour que le biseau passe sous le texte Par contre sans voir le coder entier avec le mix bootstrap difficile à dire d'où ça vient