弧形边框 CSS 实现

最近我在Dribbble上看到一个设计理念，对我很有启发。特别是顶部和底部带有弯曲 U 形的侧边栏给了我关于制作选项卡堆栈或流程图的很好的想法。我可以用 alpha 图像来制作它，但使用纯 CSS 会更好，而且我不介意 CSS3。不过我对 CSS3 不熟悉，希望有人能建议我一种方法。

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

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

我正在使用 CSS3transform倾斜两个伪元素的属性:before and :after它们放置在每个彩色部分的顶部。我必须在果岭下方放置一个作为存根，才能显示出果岭边缘。

See fiddle http://jsfiddle.net/MS5J7/3/

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