带有 CSS3 的波浪形边框答案

【问题标题】：Wave shape border with CSS3带有 CSS3 的波浪形边框
【发布时间】：2015-03-30 23:52:15
【问题描述】：

我想使用 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/

请问我哪里出错了？

【问题讨论】：

也看看：Wave (or shape?) with border on CSS3.
但这并不能回答这个问题......
@HashemQolami - 我倾向于同意这个提问者的观点。
好吧，我个人不会对此感到满意，因为如果您查看它在屏幕外绘制的形状，那么这个答案还有很多不足之处。但是，如果它满足了用户的问题，那么他将拥有更多的权力。
@RustyIngles: this might be useful... 或 this

标签： html css css-shapes

【解决方案1】：

你可以试试border-radius:

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

&lt;div class="header"&gt;&lt;/div&gt;

【讨论】：