css - css after before beforeで特定のフォームを作る

Question

私はcssだけでこの結果を得ようとしています。私は画像を使用する代わりに css を作成することを好みます。これは、このキングの div が多数ありますが、幅の角度が異なるためです。

私が持とうとしている形

ここで私が試したことを見つけることができます...しかし成功しませんでした...

.bloc1:before{
content: "";
background-color: #123456;
width : 27px;
height : 27px;
margin-top : 10px;
transform: rotate(45deg);
 }

 .bloc1 {
 background-color: #000000;
 width : 107px;
 text-align: center;
 padding-top : 8px;
 height : 19px;
 color : #FFFFFF;
 text-transform: uppercase;
 font-size: 12px;
position: relative;
}

 .bloc1:after{
 content: "";
 background-color: #123456;
 width : 27px;
 height : 27px;
 margin-top : 10px;
 transform: rotate(45deg) ;
}

http://jsfiddle.net/wBNry/

あなたにとって、それを行うための最良の方法は何ですか?

どうもありがとう:)