box-shadow - 这可能吗？

Question

我需要做一个像下面的形状，并试图让它与CSS一起工作。

我能得到的最接近的是这样的。我必须将底部的阴影向下推，否则会与顶部的阴影重叠。

是否有可能实际上使顶级版本的CSS？

Answer 1

Working Example Here

CSS

.block-a { 
    display: block; 
    height: 200px; 
    width: 200px; 
    background-color: #8BC541; 
    -moz-box-shadow: 0 0 10px #000; 
    -webkit-box-shadow: 0 0 10px #000; 
    box-shadow: 0 0 10px #000; 
    -webkit-border-radius: 10px; 
    -webkit-border-bottom-right-radius: 0; 
    -moz-border-radius: 10px; 
    -moz-border-radius-bottomright: 0; 
    border-radius: 10px; 
    border-bottom-right-radius: 0; 

} 
.block-b { 
    color: #fff; 
    text-align: center; 
    line-height: 40px; 
    position: relative; 
    display: block; 
    height: 40px; 
    width: 80px; 
    margin-left: 120px; 
    -moz-box-shadow: 0 0 10px #000; 
    -webkit-box-shadow: 0 0 10px#000; 
    box-shadow: 0 0 10px #000; 
    -webkit-border-bottom-right-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    background-color: #8BC541; 
} 
.block-b:before { 
    position: absolute; 
    background-color: #8BC541; 
    height: 11px; 
    width: 90px; 
    top: -11px; 
    left: -10px; 
    display: block; 
    content: ""; 
} 
.block-b:after { 
    padding-left: 5px; 
    color: #fff; 
    content: "▲"; 
} 

HTML

<div class="block-a"></div> 
<div class="block-b">Login</div> 

图片

Answer 2

这是一个答案堆！看起来你有很多选项可以使用。我会再添加一堆：http://jsfiddle.net/XrkJq/