在CSS3上有边框的波形(或形状？)

CSS唯一解决方案

正如你所要求的,我只制作了形状.使用定位将其添加到页面非常简单.对于像这样的任务,使用CSS不太实用.我在制作一个简单的形状时浪费了大约15-20分钟!在这种情况下,SVG更为可取.但是,尽管可以做到,但必须这样做.这里 :

body{
    margin:0;
    padding:0;
}
#one{
    position:absolute;
    top:30px;
    left:-30px;
    height:10px;
    width:10px;
}
#one > span{
    position:relative;
    top:-215px;
    left:300px;
    text-align:center;
    width:300px;
    height:80px;
    display:block;
    line-height:80px;
    z-index:4;
}
.one{ 
    position: relative;
    height: 90px; 
    width: 300px; 
    background-color: #007FC1; 
    border-radius: 25px; 
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:2;
}
.obefore {
    height:35px;
    width:60px;
    position:relative;
    top:-35px;
    left:290px;
    background-color: #007FC1;
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:1;
}
.oafter{
    position: relative;
    top: -135px;
    left:310px;
    height: 90px; 
    width: 300px; 
    background-color: white; 
    border-bottom-left-radius: 25px;
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:3;
}
#two{
    position:absolute;
    top:20px;
    left:-20px;
}
.two{ 
    position: relative;
    height: 90px; 
    width: 300px; 
    background-color: #B4CAD8; 
    border-radius: 25px; 
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:0;
}
.tafter{
    position: relative;
    top: -80px;
    left:290px;
    height: 90px; 
    width: 300px;
    background-color: #B4CAD8; 
    border-top-left-radius: 45px;
    border-bottom-left-radius: 25px;
    -webkit-transform: skew(30deg); 
    transform: skew(30deg);
    z-index:2;
}

    This is a Panel.