html - 使用 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 :

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

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