CSS3 Mặt trăng Hình dạng Eclipse

Question

Làm cách nào để tạo hình dạng sau trong CSS3, mà không sử dụng các lớp giả như ": before"?

tôi đã làm nó rất dễ dàng với: trước đó, nhưng vấn đề là tôi không muốn có một yếu tố vững chắc trên vùng màu xám (xem JSFiddle - http://jsfiddle.net/aUdLr/2/)

div{ 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    border-radius: 100%; 
    position: relative; 
} 
div:before{ 
    content: ""; 
    width: 100%; 
    height: 110%; 
    background: gray; 
    position: absolute; 
    left: 5px; 
    top: -5%; 
    border-radius: 100%; 
} 

Answer 1

bạn có thể sử dụng rộng biên giới:

div{ 
    width: 100px; 
    height: 100px; 
    border-radius: 100%; 
    border-width: 0; 
    border-left:solid 10px red; 
} 

khoa học chính xác Ví dụ: http://jsfiddle.net/aUdLr/4/

Hãy nhớ rằng hình bên ngoài là không phải là một vòng tròn hoàn hảo, bởi vì đường viền được thêm vào chiều rộng. Bạn có thể bù đắp bằng cách giảm chiều rộng hoặc bằng cách sử dụng Box-sizing: Border-box.

giải pháp

Answer 2

đơn giản CSS3 mà nói đến cái tâm của tôi:

div:before { 
    font: 80px serif; 
    color: red; 
    content: "("; 
} 

Here's a fiddle.

(Bây giờ seriously- nếu bạn muốn có một số lượng tốt của kiểm soát hình dạng, tôi đề nghị sử dụng SVG.)

Answer 3

Để có được hiệu ứng của một vòng tròn nhỏ bị lu mờ bởi một vòng tròn lớn hơn, bạn có thể thêm bóng vào phần tử trong suốt:

div{ 
    width: 100px; 
    height: 100px; 
    border-radius: 100%; 
    background-color:transparent; 
    box-shadow: -23px 0 0px -15px #ff8; 
} 

Ví dụ: http://jsfiddle.net/aUdLr/6/