Reputation: 832
Is this possible to make with CSS? (Color is not important, just bottom side that is oval)
Upvotes: 12
Views: 1424
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
Reputation: 51514
Try
background-color: #60a0d0;
border-bottom-left-radius:50% 10%;
border-bottom-right-radius:50% 10%;
(with appropriate browser prefixes)
Upvotes: 10