与CSS3的波形边框

Question

我想使用CSS3（而不是SVG）来显示类似于下面的边框

我需要使用的HTML是：

<div class="header"></div>

使用CSS：

.header {
    position: relative;
    height: 70px;
    width: 100%;
    background: #d3d3d3;
}

.header:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 0 0% 0% 100%;
    width: 3%;
    height: 70px;
    background-color: #fff;
    right: 0;
    top: 0;
}

.header:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 0% 0% 100% 0%;
    width: 3%;
    height: 70px;
    background-color: #fff;
    left: 0;
    top: 0;
}

这是中途，但不完全正确。我在这里创建了一个JSfiddle：http://jsfiddle.net/7fjSc/1206/

我想出错的任何想法吗？

Answer 1

您可以尝试border-radius：

＆＃13;

＆＃13;

.header {
  height: 70px;
  background: #d3d3d3;
  border-radius: 5em 5em 0 0 / 13em 13em 0 0;
}

＆＃13;

<div class="header"></div>

＆＃13;

＆＃13;

＆＃13;