Création de formes CSS3?

Question

Je dois créer ce genre d'élément css, laisse dire html

<h3 class="section-heading">Hello</h3> 

Mais quand j'essaie comme somethign comme celui-ci

.section-heading:after{ 
-moz-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
-webkit-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
-o-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
-ms-transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
transform: scale(1) rotate(359deg) translate(0px, 0px) skew(320deg, 0deg); 
} 

texte aussi obtenir rotation, même i ont dit après, où peut être le problème?

Answer 1

le texte ne doit pas pivoter si vous appliquez la rotation au pseudo-élément.

mais je suggère une autre solution pour atteindre cette forme. (Cela ne fonctionnera que dans des circonstances spécifiques)

voir ici jsfiddle

ajouter souhaité background-color sur l'élément, et avec un pseudo-élément comme :after créer un triangle avec un angle 90deg avec le background-color du récipient et le placer sur le côté droit de la section-heading

HTML

<h3 class="section-heading">Hello</h3> 

CSS

body { 
    background:#fff; 
    } 

.section-heading:after{ 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 0 22px 22px; 
    border-color: transparent transparent #fff transparent; 
    position:absolute; 
    content:""; 
    right:0; 
    top:0; 

} 
.section-heading { 
    position:relative; 
    color:#fff; 
    background:blue; 
    width:200px; 
} 

Answer 2

Voici une autre alternative à la solution @ Mihai:

body { 
 
    background:#fff; 
 
    } 
 

 
.section-heading:after{ 
 
    width: 50px; 
 
    height: 100%; 
 
    background: blue; 
 
    position:absolute; 
 
    content:""; 
 
    transform: skewX(-20deg); 
 
    right:-25px; 
 
    top:0; 
 

 
} 
 
.section-heading { 
 
    position:relative; 
 
    color:#fff; 
 
    background:blue; 
 
    width:200px; 
 
}

<h3 class="section-heading">Hello</h3>