CODEWITHSUNDEEP
css
Ljubisa Livac
Ljubisa Livac

Reputation: 832

CSS rectangular with one oval side

Is this possible to make with CSS? (Color is not important, just bottom side that is oval)

enter image description here

Upvotes: 12

Views: 1424

Answers (2)

gkond
gkond

Reputation: 4294

You can get any curve with an ellipse or circle, placed behind the main block: http://jsfiddle.net/e9RLQ/1/

.box {
    position: relative;    
    background: #60a0d0;
}
.box:after {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 100%;
    width: 300%;
    height: 300px;
    margin: -292px 0 0 -100%;
    background: #60a0d0;
    border-radius: 50%;
    content: "";
}

The drawback here is the complexity of adding gradient background.

Upvotes: 0

podiluska
podiluska

Reputation: 51514

Try 

background-color: #60a0d0;
border-bottom-left-radius:50% 10%;
border-bottom-right-radius:50% 10%;

(with appropriate browser prefixes)

Upvotes: 10

Related Questions