box-shadow - это возможно?

Question

Мне нужно сделать форму, подобную приведенной ниже, и я пытался заставить ее работать с CSS.

Самое близкое, что я мог получить, было так. Мне пришлось оттолкнуть тень в нижней части вниз, иначе она перекрылась бы с тенью сверху.

Возможно ли сделать топ-версию с помощью CSS?

Answer 1

Рабочий пример здесь

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/