jquery - 从div切出的CSS椭圆形

上面的图像是我正在尝试创建的图像，但是在使用椭圆形时遇到了一些困难。一个解释:

菜单栏是一个带有轻微线性渐变的div(从深灰色到透明的浅灰色)

公司徽标图像带有透明bg，将位于菜单栏的ont上

椭圆形切口需要与徽标的椭圆形匹配，并且之间必须有一个透明的间隙，以显示背景颜色(此变化在每个页面上，橙色只是一个示例)

我已经尝试了很多次，但都没有通过径向渐变-我能够切出一个圆，但是无法弄清楚如何使其变成椭圆形，然后无法使线性渐变起作用。看到代码:

.circle {
    height: 10em;
    background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
    background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
}

当对切口形状和渐变进行排序时，徽标将位于顶部。

任何建议或jsfiddle解决方案将不胜感激，谢谢!

编辑:jsfiddle here

编辑2:感谢那些回答，通过稍微更改设计解决了问题。我写了一些jquery来解决这个问题-当彩色区域滚动到 View 之外时，椭圆形边框和标题边框将拾取顶部的颜色，而不是透明度。

最佳答案

您可以从此Running Demo开始

注意:我添加了一个小动画来更改背景颜色，只是为了清除岛和带有切口的div之间的空间是真正透明的。

的HTML

<div class="cutout">
    <div class="island">
        <div id="circleText">Circle Text </div>
    </div>
</div>

的CSS

.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px 150px at 50% 100%,
                                transparent 100px, #555 50px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px 150px at 50% 50%,
                                silver 90px, rgba(0, 0, 0, 0) 50px);
    height: 10em;
}
.island > div {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 30px;
    bottom: 30px;

    background: rgba(fff, 0, 0, 0.2);
    padding: 5px;
    text-align: center;
}

#circleText {
    padding-top: 30px;
    font-size: 1.5em;
}

关于jquery - 从div切出的CSS椭圆形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18830868/