[Solved] css box with two different shapes

by


This is an answer based off of the one by damien hawks. I have included some jQuery so that both shapes change color on hover. You can adapt this to be closer to the code you had provided.

DEMO

HTML:

<div id="rectangle" class="hover"></div>
<div id="halfCircleBottom" class="hover"></div>

CSS:

.hover {
    background-color: #e7f4ef;
}
.hovered {
    background-color: #ff7429;
}
#rectangle {
    margin: 0 auto;
    width: 200px;
    height: 50px;
}
#halfCircleBottom {
    margin: 0 auto;
    height:45px;
    width:90px;
    border-radius: 0 0 90px 90px;
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
}

jQuery:

$(document).ready(function () {
    $('.hover').hover(function () {
        $('.hover').toggleClass('hovered');
    });
})

With this you can put the rectangle and half circle divs in a container and position them wherever you want.

0

solved css box with two different shapes