Div với vòng tròn cắt trong suốt

Question

Tôi có thể tạo một rectagle div bằng vòng tròn cắt một nửa bằng CSS không? Vòng tròn nửa phải trong suốt và để nền hiển thị qua.

mong muốn hình dạng CSS:

HTML:

<div></div> 

CSS:

div{ 
    background : #448CCB; 
    width:300px; 
    height:300px; 
} 

Answer 1

để có màu trắng cắt ra vòng tròn minh bạch và để nền hiển thị qua nó, bạn có thể sử dụng box-shadows trên một phần tử giả để giảm thiểu đánh dấu.

Trong bản trình diễn sau, màu xanh của hình dạng được đặt bằng bóng hộp và không phải thuộc tính background-color.

DEMO

đầu ra:

này cũng có thể được đáp ứng: demo

HTML:

<div></div> 

CS:

div{ 
    width:300px; 
    height:300px; 
    position:relative; 
    overflow:hidden; 
} 
div:before{ 
    content:''; 
    position:absolute; 
    bottom:50%; 
    width:100%; 
    height:100%; 
    border-radius:100%; 
    box-shadow: 0px 300px 0px 300px #448CCB; 
} 

Answer 2

Nếu bạn không nhớ rằng " ăn" chút là màu trắng và không minh bạch, vâng:

http://jsfiddle.net/tWbx5/2/

<div></div> 

CSS:

div { 
    width: 250px; 
    height: 250px; 
    margin: 10px; 
    background: #448CCB; 
} 

div:before { 
    content:" "; 
    background:white; 
    display: block; 
    width:250px; 
    height: 125px; 
    border-radius: 0 0 125px 125px; 
} 

Answer 3

Có okey?

Demo

div{ 
    width:100px; 
    height:100px; 
    background:#03b0d5; 
    display:block; 
    position:relative; 
    overflow:hidden; 
} 
div:after{ 
    width:100px; 
    height:100px; 
    border-radius:50%; 
    background:#fff; 
    display:block; 
    position:absolute; 
    content:''; 
    top:-50px; 
    left:0; 
} 

Answer 4

Đây là sollution tôi

HTML:

<div id="shape"></div> 

CSS:

#shape { 
    width:250px; 
    height:250px; 
    background:#448ccb; 
    position:relative; 
} 

#shape:before { 
    content:" "; 
    position:absolute; 
    width:250px; 
    height:250px; 
    background:#fff; 
    left:0; top:-50%; 
    border-radius:50%; 
} 

Link trong jsfiddler: demo

Solition với hộp-shadow:

HTML:

<div id="wrap"> 
    <div id="shape"></div> 
</div> 

CSS:

#wrap { 
    background:#ccc; 
    padding:20px; 
} 
#shape { 
    width:250px; 
    height:250px;  
    position:relative; 
    overflow:hidden; 
} 

#shape:before { 
    content:" "; 
    position:absolute; 
    width:100%; 
    height:100%; 
    left:0; top:-50%; 
    border-radius:50%; 
    box-shadow:0 0px 0 250px #448ccb 
} 

Link trong jsfiddler: demo