切出上面的影像就是我试图创建但我有与椭圆形的一些困难。的解释：

菜单栏有轻微的线性梯度一个div（深灰色透明浅灰色）
公司标志图像具有透明BG和将坐在菜单栏
的椭圆形切口将需要匹配标志的椭圆形，并有一个透明的差距，将显示背景色（这改变了每一页上，橙色的只是一个例子）

我试过和以径向渐变失败多次 - 我能够圈出一个圆圈，但合作你没有弄清楚如何使它变成椭圆形，然后无法使线性渐变工作。请参阅代码：

.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来解决这个问题 - 当彩色区域滚动查看时，椭圆形边框和标题边框将拾取顶部的颜色，而不是透明度。

enter image description here

来源

2013-09-16 Jaz Parkyn

http://stackoverflow.com/a/14747815/1654265 –

我已经收回了近票。和+1，实际上你尝试的是灵感的来源:) –

很高兴听到 - 并感谢你 –

你可以从这个Running Demo

注启动：我心中已经e添加了一个小动画来改变背景颜色，以清楚岛与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; 
}

来源

2013-09-17 15:24:43

试试这个：http://css-tricks.com/the-shapes-of-css/

位置是绝对的菜单上的其他部分的顶部

来源

2013-09-16 14:53:13 Pownyan

是的，我发现之前的网页很有用，但形状需要是一个切口 - 而且是透明的。谢谢 –

哦，对不起。我误解了这个问题 – Pownyan

如果你创建了一个与背景颜色相同的div，将它放置在你想要的切口的位置，然后将另一个div放在它的顶部并带有logo？ – Pownyan

你可以做这样的事情：

.container{ 
    height: 10em; 
    background: #76757e; 
} 

.ovalCutout{ 
    background:white; 
    height:50px; 
    width:100px; 
    border-radius:50%; 
    margin:0px auto; 
    position:relative; 
    top:120px; 
}

http://jsfiddle.net/UwXKu/

来源

2013-09-16 15:22:01 Conqueror

好主意，但由于页面滚动时背景颜色会发生变化，因此需要使用透明度进行剪切。虽然 –

你c一个做3个背景的组合，中心的一个是径向的，另一个是线性的。

但是要使2种梯度完全匹配是困难的;只有梯度非常平滑才可行。

.back { 
    height: 100px; 
    width: 1000px; 
    padding: 0px; 
    background-image: radial-gradient(200px 100px ellipse at 50% 100%, transparent 70px, 
       rgba(100, 100, 100, 0.8) 73px, 
       rgba(80, 80, 80, 1) 198px), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8)), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8)); 
    background-size: 200px 100px, 40% 100%, 40% 100%; 
    background-repeat: no-repeat; 
    background-position-x: 50%, 0%, 100%; 
    background-position-y: 100%; 
}

demo

来源

2013-09-16 19:49:08 vals

感谢您的代码在Firefox中破解，椭圆形切口被渐变填充;谢谢回答。 –

试试这个：

background: radial-gradient(ellipse at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);

的jsfiddle here

来源

2013-09-16 21:27:08 morgul

CSS椭圆形从DIV

回答

demo

相关问题