Box Shadow auf nur 3 Seiten

Question

Ich habe zwei überlappende divs, die css3 box shadows haben. Das Problem ist, dass ich selbst dann, wenn ich den Z-Index setze, immer noch einen der Boxschatten des Div entfernen muss. Ich habe Fälle gesehen, in denen negative Spreads und Nullwerte verwendet werden, aber ich denke nicht, dass das hier funktionieren würde.

Der Code, den ich jetzt haben, ist:

#bulb-top { 
    position: relative; 
    width: 280px; 
    height: 280px; 
    background-color: #E5F7A3; 
    -webkit-border-radius: 280px; 
    -moz-border-radius: 280px; 
    border-radius: 280px; 
    border: 8px solid #FFF40C; 
    top: -430px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C; 
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C; 
    box-shadow: 0px 0px 15px 1px #FFF40C; 
    z-index: 4; 
} 

#bulb-bottom { 
    position: relative; 
    width: 140px; 
    height: 120px; 
    background-color: #E5F7A3; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 30px; 
    -moz-border-radius-bottomleft: 30px; 
    -webkit-border-radius: 0px 0px 30px 30px; 
    border-radius: 0px 0px 30px 30px; 
    border-left: 8px solid #FFF40C; 
    border-right: 8px solid #FFF40C; 
    border-bottom: 8px solid #FFF40C; 
    top: -455px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C; 
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C; 
    box-shadow: 0px 0px 15px 1px #FFF40C; 
    z-index: 5; 
} 

http://jsfiddle.net/minitech/g42vq/3/

Answer 1

Sie das ::before Pseudoelement verwenden können, um eine Seite der Box Schatten zu blockieren. Es ist nicht perfekt, aber es könnte für deine Situation reichen.

#bulb-bottom:before { 
    background-color: #E5F7A3; 
    content: ''; 
    display: block; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -10px; 
    width: 140px; 
}​