弯曲的边框CSS实现

最近我在Dribbble上看到了一个设计概念,它真的让我很振奋.特别是在顶部和底部具有弯曲U形的侧边栏让我对制作标签堆栈或流程图有很好的想法.我可以用alpha图像制作它,但最好使用纯CSS,我不介意 CSS3.但是我对 CSS3并不熟悉,希望有人可以建议我这样做.

裁剪自http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177

原创设计于http://dribbble.com/shots/1213195-CMS-Concept

我正在使用CSS3转换属性来扭曲两个伪元素：before和：之后放置在每个彩色部分的顶部.我不得不在绿色下方放置一个短柱,以显示绿唇.

见fiddle

CSS的主要形状如下：

/* Shape */

.flap {
    display: block;
    position: relative;
}
.flap:before, .flap:after {
    content:'';
    display: block;
    position: absolute;
    top: -2em;
    z-index: 5;
    width: 100%;
    height: 4em;
    border-radius: 1em;
    background-color: inherit;
    border: inherit;
    border-width: 4px;
}
.flap:before {
    left: -50%;
    -webkit-transform: skew(60deg);
    -moz-transform: skew(60deg);
    -o-transform: skew(60deg);
}
.flap:after {
    right: -50%;
    -webkit-transform: skew(-60deg);
    -moz-transform: skew(-60deg);
    -o-transform: skew(-60deg);
}