CSS3シェイプを作成しますか？

Question

私は、CSSでこの種の要素を作成する必要が

は、HTMLに

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

を言うことができますが、私はこの

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

テキストなどのsomethignようにしようとしたときも、私は、回転さえ取得します後で言いました、どこに問題がありますか？

Answer 1

擬似要素に回転を適用すると、テキストは回転しません。

しかし、私はその形状を達成するための別の解決法を提案しています。

素子に所望background-colorを追加し、:after等擬似要素とのbackground-colorと90deg角三角形を作成ここでjsfiddle

参照（これは、特定の状況で動作します）コンテナとsection-heading

HTML

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

0の右側に位置して

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

はここミハイのソリューション@の別の代替です：

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>