Html 绘制带有斜边的双曲项目

我正在创建一个网站，上面有一个标题/菜单。 在中间，有一个标志。为了强调这一点，我在徽标下方放置了一个省略号：因此在下面，您可以看到省略号，它与菜单的其余部分完美融合

.ellips {
        border-radius: 50%;
        height: 130%;
        background: white;
        left: 0px;
        right: 0px;
        z-index: 1;
        position: absolute;
        top: 6%;
        border: 2px solid #dfe0e4;
    }

现在，客户希望看到左右“角”也弯曲：

我知道“在菜单下插入一个省略号”的方法是不够的。 我在考虑两种可能的解决方案：

使用曲线创建SVG，并将其放置在菜单下方。我已经尝试过该解决方案，但我不是SVG专家，所以我尝试了CSS方法：

尝试用这样的曲线创建CSS项（div）：上面是白色，下面是透明的。将dat项置于菜单下方

.ellips {
        border-radius: 50%;
        height: 130%;
        background: white;
        left: 0px;
        right: 0px;
        z-index: 1;
        position: absolute;
        top: 6%;
        border: 2px solid #dfe0e4;
    }

我更喜欢css解决方案，因为我在SVG中不是什么大英雄。但是如果SVG可以更容易地实现这一点。那我就把这个解决方案拿出来

编辑：您看到的淡蓝色背景是一个参考底图。所以这需要透明

省略号需要涂成白色

---

SVG将是解决此类问题的方法，但对于CSS解决方案，我可能会使用具有线性/径向梯度的多背景，但缺点是很难计算不同的值并使整个形状响应

下面是一个可以帮助您了解一些情况的示例：

正文{
背景：灰色；
}
.标题{
边框：5px纯红；
边界顶部：无；
高度：100px；
宽度：600px；
背景：
径向梯度（椭圆在-7px 26px处，透明50%，红色50%，红色钙（50%+11px），白色0%）101px-3px/7%19%无重复，
径向梯度（60px 26px处的椭圆，透明50%，红色50%，红色钙（50%+11px），白色0%）454px-4px/7%19%无重复，
径向梯度（顶部椭圆，白色20%，红色20%，红色钙（21%+2px），透明0%）50%0/200%200%无重复，
线性梯度（红色50%，透明0%）0 0/100%10px无重复，
线性渐变（向右、灰色、蓝色）；
}
.标题tr{
边框：5px纯红；
边缘顶部：20px；
边界顶部：无；
高度：100px；
宽度：600px；
背景：
径向梯度（椭圆在-7px 26px处，透明50%，红色50%，红色钙（50%+11px），白色0%）101px-3px/7%19%无重复，
径向梯度（60px 26px处的椭圆，透明50%，红色50%，红色钙（50%+11px），白色0%）454px-4px/7%19%无重复，
径向梯度（顶部椭圆，白色20%，红色20%，红色钙（21%+2px），透明0%）50%0/200%200%无重复，
线性梯度（红色50%，透明0%）0 0/110px 10px无重复，
线性梯度（红色50%，透明0%）100%0/110px 10px无重复；
}

---

SVG将是解决此类问题的方法，但对于CSS解决方案，我可能会使用具有线性/径向梯度的多背景，但的缺点是，很难计算不同的值并使整个形状具有响应性

下面是一个可以帮助您了解一些情况的示例：

正文{
背景：灰色；
}
.标题{
边框：5px纯红；
边界顶部：无；
高度：100px；
宽度：600px；
背景：
径向梯度（椭圆在-7px 26px处，透明50%，红色50%，红色钙（50%+11px），白色0%）101px-3px/7%19%无重复，
径向梯度（60px 26px处的椭圆，透明50%，红色50%，红色钙（50%+11px），白色0%）454px-4px/7%19%无重复，
径向梯度（顶部椭圆，白色20%，红色20%，红色钙（21%+2px），透明0%）50%0/200%200%无重复，
线性梯度（红色50%，透明0%）0 0/100%10px无重复，
线性渐变（向右、灰色、蓝色）；
}
.标题tr{
边框：5px纯红；
边缘顶部：20px；
边界顶部：无；
高度：100px；
宽度：600px；
背景：
径向梯度（椭圆在-7px 26px处，透明50%，红色50%，红色钙（50%+11px），白色0%）101px-3px/7%19%无重复，
径向梯度（60px 26px处的椭圆，透明50%，红色50%，红色钙（50%+11px），白色0%）454px-4px/7%19%无重复，
径向梯度（顶部椭圆，白色20%，红色20%，红色钙（21%+2px），透明0%）50%0/200%200%无重复，
线性梯度（红色50%，透明0%）0 0/110px 10px无重复，
线性梯度（红色50%，透明0%）100%0/110px 10px无重复；
}

---

就快到了。。。这可能会给你带来麻烦

我在标题上使用了

：：before

和

：：after

来添加两条曲线

玩一点半径的值，得到你想要的

椭圆具有固定的宽度，因此这是尽可能灵敏的。调整屏幕大小时，角不会断开，但省略号的大小不会改变

html，
身体{
保证金：0；
填充：0；
}
*,
*：：之前，
*：：之后{
框大小：边框框；
}
身体{
背景：线性渐变（向右，#d2e1f1，#86acd0）；
}
标题{
高度：100px；
背景：白色；
位置：相对位置；
}
header:：before，header:：after{
内容：“；
显示：块；
宽度：计算（50%-80px）；
位置：绝对位置；
顶部：95px；
高度：80px；
边框：6px实心#dadbe0；
右边框颜色：透明；
左边框颜色：透明；
边界底部：0；
z指数：3；
}
标题：：之前{
左：0px；
边界半径：0px 140px 0px 0px/0px 60px 0px 0px；
}
标题：：之后{
右：0px；
边界半径：140px 0px 0px 0px/60px 0px 0px 0px；
}
埃利普斯先生{
背景：白色；
高度：120px；
宽度：300px；
位置：绝对位置；
底部：-40px；
z指数：-1；
边界半径：0px 0px 90%90%/0px 0px 90px 90px；
左：50%；
转换：翻译（-50%）；
边框：6px实心#dadbe0；
}
.面具{
背景：白色；
高度：9px；
宽度：330px；
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
z指数：2；
边界半径：0px 0px 90%90%/0px 0px 90px 90px；
底部：-8px；
}

---

就快到了。。。这可能会给你带来麻烦

我使用了

：：before.doublecurve {
  width: 100%;
  height: 0;
  margin: 20px 0;
  border: 1px dashed #bc9;
  padding-bottom: 20%;
  position: relative; }

.doublecurve svg { 
  position: absolute;
  width: 100%; height: 100%;}

.doublecurve path.concave { 
  stroke: #d0d0d0; 
  stroke-width: 4px;}