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/