css - 在 before 之后用 css 制作一个特定的表单

Question

我尝试只用 css 得到这个结果。我更喜欢使用 css 而不是使用图像，因为我会有很多这个国王的 div，但宽度 Angular 不同。

The shape i'm trying to have

你会在这里找到我尝试过的...但没有成功...

.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/

对您来说，最好的方法是什么？

非常感谢:)

Answer 1

JSFiddle Demo

.bloc1:before,
.bloc1:after {
    content: "";
    width:0;
    height:0;
    border: 15px solid transparent;
    position:absolute;
    top:0;
}

.bloc1 {
    background-color: #000000;
    width : 107px;
    text-align: center;
    height : 30px;
    color : #FFFFFF;
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
    margin:50px;
}
.bloc1:before {
    right:100%;
    border-right-color:red;
}

.bloc1:after{
    left:100%;
    border-left-color:red;
}