Convex Square

Box Concept

by silb3r

HTML

<div class="convex one"></div>

CSS

body {
    background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}
.convex {
    height: 100px;
    width: 100px;
    margin: 100px;
    position: relative;
}
.convex.one {
    background-color: #f27011;
}
.convex.two {
    background-color: #5a7c87;
}
.convex:hover {
    background-color: #444;
}
.convex:after, .convex:before {
    background-color: inherit;
    content:'';
    position: absolute;
    z-index: -1;
}
.convex:after {
    border-radius: 10% / 50%;
    bottom: 0;
    left: -10%;
    right: -10%;
    top: 0;
}
.convex:before {
    border-radius: 50% / 10%;
    bottom: -10%;
    left: 0;
    right: 0;
    top: -10%;
}