Question

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 possible to actually make the top version with 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>

Image