Html 底部线性弯曲的收割台？

很抱歉在此处重复类似于的问题：

但那个里的方法并不能满足我对标题的定制需求。 但与边框

边框左下半径

和

边框右下半径

不太相似

正如你所看到的，我想要实现的标题在整个底部呈线性弯曲，但我已经实现的是，标题的左右部分有更多的曲线边界，而弯曲的不是整个底部呈线性。它在短距离后变直。我试图增加%的年龄，但它的边缘变得更加弯曲

有没有其他方法可以使我的整个底部呈线性弯曲

这是我的密码： CSS代码：

header{     
        background-color: #000;
        border-bottom-left-radius:25%;
        border-bottom-right-radius:25%;
        padding: 10px;
        opacity: 0.35;
        position: fixed;
        width: 100%;
        z-index: 1000;
        }

以下是链接JSFIDLE链接：

@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400600700）；
/*--全局CSS--*/
.收割台容器{
保证金：0自动；
宽度：1170px；
}
保险商实验室{
填充：0；
保证金：0；
}
/*标题CSS*/
标题{
背景色：#000；
边界左下半径：25%；
边界右下半径：25%；
填充：10px；
不透明度：0.35；
位置：固定；
宽度：100%；
z指数：1000；
}
标题导航ul{
列表样式类型：无；
}
标题。标志{
显示：内联块；
}
标题，标题导航{
显示：内联块；
浮动：对；
填充：7px；
}
头李{
浮动：左；
左边距：20px；
}
标题李a{
颜色：#fff；
字体：600 16px“开放式SAN”；
文本转换：大写；
文字装饰：无；
}
头李a：悬停，
标题li a：活动{
颜色：#e51937；
文字装饰：无；
}

你能用这种方法试试吗

@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400600700）；
/*--全局CSS--*/
.收割台容器{
保证金：0自动；
宽度：1170px；
}
保险商实验室{
填充：0；
保证金：0；
}
/*标题CSS*/
标题{
背景色：#000；
边界左下半径：50%；
边框右下半径：50%；
填充：10px 10px 35px；
不透明度：0.35；
位置：固定；
宽度：100%；
z指数：1000；
}
标题导航ul{
列表样式类型：无；
}
标题。标志{
显示：内联块；
}
标题，标题导航{
显示：内联块；
浮动：对；
填充：7px；
}
头李{
浮动：左；
左边距：20px；
}
标题李a{
颜色：#fff；
字体：600 16px“开放式SAN”；
文本转换：大写；
文字装饰：无；
}
头李a：悬停，
标题li a：活动{
颜色：#e51937；
文字装饰：无；
}

我就是这样做的：

.overlay {
    position: absolute;
    z-index: -1;
    height: 100%;
    border-radius: 50%;
    width: 150%;
    left: -25%;
    top: -60%;
    background: rgba(121, 121, 121, 0.8);
    pointer-events:none;
}

---

根据您的喜好调整

宽度

、

左侧

和

顶部

百分比：）

您可以尝试

剪辑路径

，但一定要检查浏览器支持

你基本上只需要使用一个椭圆来剪辑你的标题div

@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400600700）；
身体{
保证金：0；
}
/*--全局CSS--*/
.收割台容器{
保证金：0自动；
宽度：1170px；
文本对齐：右对齐；
}
保险商实验室{
填充：0；
保证金：0；
}
/*标题CSS*/
标题{
背景色：#000；
/*
边界左下半径：25%；
边界右下半径：25%；
*/
填充：10px；
不透明度：0.35；
位置：固定；
宽度：100%；
z指数：1000；
最小高度：50px；
-webkit剪辑路径：椭圆（60%100%在50%0%）；
剪辑路径：椭圆（60%100%在50%0%）；
}
标题导航ul{
列表样式类型：无；
}
标题。标志{
显示：内联块；
浮动：左；
}
标题，标题导航{
显示：内联块；
/*浮动：对*/
填充：7px；
}
头李{
浮动：左；
左边距：20px；
}
标题李a{
颜色：#fff；
字体：600 16px“开放式SAN”；
文本转换：大写；
文字装饰：无；
}	
头李a：悬停，
标题li a：活动{
颜色：#e51937；
文字装饰：无；
}
@媒体屏幕和屏幕（最大宽度：1169px）{
.收割台容器{
宽度：840px；
}
标题，标题导航{
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：996px）{
.收割台容器{
宽度：100%；
}
标题。标志{
浮动：无；
显示：块；
文本对齐：居中；
}
标题，标题导航{
显示：无；
}
}

我终于想出了这个问题的解决办法。我使用了pesudo class

：before

作为解决方案

/*--全局CSS--*/
.收割台容器{
显示：表格；
保证金：0自动；
宽度：1170px；
身高：100%；
}
保险商实验室{
填充：0；
保证金：0；
}
/*标题CSS*/
标题{
填充：10px；
位置：固定；
宽度：100%；
z指数：1000；
}
标题：之前{
背景色：rgba（0,0,0,0.35）；
宽度：150%；
内容：''；
高度：150像素；
边界左下半径：50%；
边框右下半径：50%；
顶部：-76px；
位置：绝对位置；
z指数：-1；
左边缘：-25%；
}
标题ul{
列表样式类型：无；
}
标题。标志{
显示：表格单元格；
垂直对齐：中间对齐；
}
标题，标题导航{
显示：表格单元格；
浮动：对；
填充：7px；
垂直对齐：中间对齐；
}
头李{
显示：内联块；
}
标题李a{
颜色：#fff；
字体：600 16px“开放式SAN”；
填充：0 15px 0 15px；
文本转换：大写；
文本数据