CSS椭圆形切出从div [英] CSS oval shape cut out from div

问题描述

上述图片是我试图创建，但我有一些困难与椭圆形。解释：

• 菜单栏是一个具有轻微线性渐变（深灰色到浅灰色）的div。


• 公司标志图片有一个透明的bg，将坐在菜单栏的ontop上。


• 椭圆形切口将需要匹配徽标的椭圆形，之间的差距将显示背景颜色（每页上的变化，橙色只是一个例子）

许多次使用径向渐变 - 我能够得到一个圆切出，但不能解决如何使它椭圆，然后不能得到线性渐变的工作。查看代码：

  .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 =http://jsfiddle.net/JazParkyn/fZWM4/ =nofollow noreferrer>此处

编辑2：已解决问题改变设计略，感谢那些回答。我写了一些jquery来解决这个 - 当有色区域滚动出来的视图椭圆形边框和标题边框将拾起顶部的颜色，而不是透明度。

解决方案

您可以从此 运行演示

注意：我添加了一个小动画来更改背景颜色，以清除岛和div之间的空格是透明的。

HTML

 < div class =cutout> 
< div class =island> 
< div id =circleText>圆形文字< / 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（椭圆200px 150px 50％50％，
 silver 90px，rgba（0，0，0，0）50px）; 
 height：10em; 
} 
 .island> div {
位置：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; 
} 
  

The above image is what i'm trying to create but am having some difficulties with the oval shape. An explanation:

• The menu bar is a div with a slight linear gradient (dark grey to transparent lighter grey)
• The company logo image has a transparent bg and will sit 'ontop' of the menu bar
• The oval cutout will need to match the oval of the logo and have a transparent gap between that will show the background colour (this changes on each page, orange is just an example)

I've tried and failed many times with a radial gradient - I was able to get a circle cut out but couldn't work out how to make it oval and then couldn't get the linear gradient to work. See code:

.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);
}

When the cutout shape and the gradient is sorted, the logo will be positioned over the top.

Any suggestions or jsfiddle solutions would be appreciated, thanks!

EDIT: jsfiddle here

EDIT 2: Have solved the problem by changing the design slightly, thanks to those who replied. I wrote some jquery to solve this - when the coloured area scrolls out of view the oval border and header border will pick up the colour of the top section, instead of the transparency.

解决方案

You can start from this Running Demo

Note: I've added a small animation to change the background color just to clear that the space between the island and the div with the cutout is really transparent.

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;
}

这篇关于CSS椭圆形切出从div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！