blocks|key|2092281|text|试试这个：http://css-tricks.com/the-shapes-of-css/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2092282|将它绝对放置在菜单的其他部分上。|2092283|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/the-shapes-of-css/^0|5|14|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Try this: <a href="http://css-tricks.com/the-shapes-of-css/" rel="nofollow">http://css-tricks.com/the-shapes-of-css/</a>

position it absolutely on top of the other parts of the menu

blocks|key|2092285|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2092286|.container{
++++height:+10em;
++++background:+#76757e;
}

.ovalCutout{
++++background:white;
++++height:50px;
++++width:100px;
++++border-radius:50%25;
++++margin:0px+auto;
++++position:relative;
++++top:120px;
}|code-block|syntax|javascript|2092287|http://jsfiddle.net/UwXKu/|offset|length|2092288|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

You could do something like this:

<pre><code>.container{
 height: 10em;
 background: #76757e;
}

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

<a href="http://jsfiddle.net/UwXKu/" rel="nofollow">http://jsfiddle.net/UwXKu/</a>

blocks|key|84206|text|你可以做一个由三个背景组成的组合，中间一个是径向的，另一个是直线的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84207|然而，要使这两种梯度完全匹配是很困难的，只有当梯度非常平滑时，才能做到。|84208|.back+{
++++height:+100px;
++++width:+1000px;
++++padding:+0px;
++++background-image:+radial-gradient(200px+100px+ellipse+at+50%25+100%25,+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%25+100%25,+40%25+100%25;
++++background-repeat:+no-repeat;
++++background-position-x:+50%25,+0%25,+100%25;
++++background-position-y:+100%25;
}|code-block|syntax|javascript|84209|演示|offset|length|84210|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/vals/GZVCy/^0|0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

You can do it making a composite of 3 backgrounds, the center one radial and the side ones linear.

It's difficult however to make the 2 kind of gradients match exactly; it will be only doable if the gradient is very smooth.

<pre><code>.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%;
}
</code></pre>

<h1><a href="http://jsfiddle.net/vals/GZVCy/" rel="nofollow">demo</a></h1>

blocks|key|84212|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|84213|background:+radial-gradient(ellipse+at+50%25+100%25,+transparent+50px,+rgba(84,+82,+94,+0.8)+50px);|code-block|syntax|javascript|84214|jsfiddle+这里|offset|length|84215|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/grv7n/^0|0|0|9|2|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try this one:

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

jsfiddle <a href="http://jsfiddle.net/grv7n/" rel="nofollow">here</a>

<img src="https://i.stack.imgur.com/telOf.jpg" alt="goal">

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

<ul>
<li>The menu bar is a div with a slight linear gradient (dark grey to transparent lighter grey)</li>
<li>The company logo image has a transparent bg and will sit 'ontop' of the menu bar</li>
<li>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)</li>
</ul>

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:

<pre><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);
}
</code></pre>

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 <a href="http://jsfiddle.net/JazParkyn/fZWM4/" rel="nofollow noreferrer">here</a>

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.

<img src="https://i.stack.imgur.com/oDiVw.png" alt="enter image description here">

CSS oval shape cut out from div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

​​上面的图片是我想要创造的，但在椭圆形的形状上有一些困难。一种解释：菜单栏是一个带有轻微线性梯度的div (深灰色到透明的浅灰色)。该公司标识图像具有透明的bg，并将坐在菜单栏的“顶部”。椭圆形的裁剪将需要匹配的标志椭圆形，并有一个透明的差距，这将显示背景颜色(这在每一页的变化，橙色只是一个例子)我用径向梯度做了很多...

问从div中切割出的CSS椭圆形状
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从div中切割出的CSS椭圆形状EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从div中切割出的CSS椭圆形状
EN