Erstellen von CSS3-Formen?

Question

Ich brauche diese Art von Element in CSS zu erstellen, können html

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

sagen Aber wenn ich wie somethign versuchen, wie dieser

.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); 
} 

Text auch drehen, ich selbst habe nachher gesagt, wo kann das problem sein?

Answer 1

Der Text sollte nicht rotieren, wenn Sie die Drehung auf das Pseudo-Element anwenden.

aber ich schlage eine andere Lösung vor, um diese Form zu erreichen. (Dies funktioniert nur unter bestimmten Umständen)

siehe hier jsfiddle

die gewünschten background-color auf dem Element hinzuzufügen, und mit einem Pseudo-Elemente wie :after ein Dreieck schaffen mit einem 90deg Winkel mit den background-color der Behälter und positionieren sie es auf der rechten Seite des 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

Hier ist eine andere Alternative zu @ Mihai-Lösung:

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>