Hình dạng hình bầu dục CSS cắt ra từ div

Question

Hình ảnh trên là những gì tôi đang cố gắng tạo nhưng gặp một số khó khăn với hình bầu dục. Giải thích:

• Các thanh menu là một div với một linear gradient nhẹ (màu xám đậm để minh bạch nhẹ hơn màu xám)
• Hình ảnh biểu trưng công ty có bg minh bạch và sẽ ngồi 'ontop' của thanh menu
• các cutout hình bầu dục sẽ cần phải phù hợp với hình bầu dục của logo và có một khoảng cách minh bạch giữa đó sẽ hiển thị màu nền (điều này thay đổi theo từng trang, cam chỉ là ví dụ)

tôi đã thử và thất bại nhiều lần với một gradient xuyên tâm - tôi đã có thể có được một vòng tròn cắt ra nhưng co uldn't làm việc ra làm thế nào để làm cho nó hình bầu dục và sau đó không thể có được gradient tuyến tính để làm việc. Xem mã:

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

Khi hình dạng cắt và gradient được sắp xếp, logo sẽ được đặt ở trên cùng.

Bất kỳ đề xuất hoặc giải pháp jsfiddle nào sẽ được đánh giá cao, cảm ơn!

EDIT: jsfiddle here

EDIT 2: Đã giải quyết vấn đề bằng cách thay đổi thiết kế nhẹ, nhờ vào những người trả lời. Tôi đã viết một số jquery để giải quyết điều này - khi các khu vực màu cuộn ra khỏi xem biên giới hình bầu dục và biên giới tiêu đề sẽ nhận màu sắc của phần trên, thay vì minh bạch.

Answer 1

Bạn có thể bắt đầu từ này Running Demo

Lưu ý: I'v e đã thêm một hình động nhỏ để thay đổi màu nền chỉ để xóa khoảng trống giữa đảo và div có dấu cắt là thực sự là trong suốt.

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

Answer 2

Hãy thử điều này: http://css-tricks.com/the-shapes-of-css/

vị trí của nó hoàn toàn trên đầu trang của các bộ phận khác của menu

Answer 3

Bạn có thể làm một cái gì đó như thế này:

.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/

Answer 4

Bạn c một làm nó làm cho một hỗn hợp của 3 nền, trung tâm một xuyên tâm và những người bên tuyến tính.

Tuy nhiên, thật khó để làm cho 2 loại gradient phù hợp chính xác; nó sẽ chỉ có thể thực hiện được nếu gradient rất mượt mà.

.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

Answer 5

Hãy thử này:

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

jsfiddle here