box-shadow - Is this possible?

I need to make a shape like the one below and was trying to get it working with CSS.

The closest I could get was like this. I had to push the shadow on the bottom part down or else it would overlap with the shadow on the top.

Is it po开发者_如何学JAVAssible to actually make the top version with CSS?

---

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>

Image

---

It's an answer pile-on! Looks like you have lots of options to work with. I'll add another to the pile: http://jsfiddle.net/XrkJq/