CODEWITHSUNDEEP
csscss-shapes
adamj
adamj

Reputation: 4782

Rectangle with oval bottom shape

Is it possible to create a flat oval that is as round as the example below?

enter image description here

I've looked at several examples on how to create the oval itself using CSS from the following sources:

Unfortunately, as you size it down in height the oval just doesn't want to retain the rounded shape. Here is my current code on how I'm trying to achieve the same visual look as the image above:

HTML

<ul>
<li>
<a href="#">
<span class="text">Home</span>
<span class="oval"></span>
</a>
</li>
</ul>

CSS

a {
    position: relative;
    padding: 10px 30px 0px 30px;
    text-transform: uppercase;
    background-color: red; color: #fff;
}
.text {
    position: relative;
    z-index: 1;
}
.oval {
    position: absolute;
    bottom: -8px; left: 0;
    z-index: 0;
    display: block;
    width: 100%; height: 20px;
    border-radius: ~"20px/10px"; /* I'm using LESS and it requires ~"" to make it work */
    background-color: red;
}

enter image description here

As a thank you for everyone here and as help for anyone in the future, here is my final code:

HTML

<ul>
    <li>
        <a href="#">Home</a>
    </li>
</ul>

CSS

a {
        overflow: hidden;
    position: relative;
    padding: 10px 30px 20px 30px;
    text-transform: uppercase;
    color: #fff;

    &:before {
        content: '';
        position: absolute;
            top: 0; left: -25%; bottom: 4px;
            z-index:-1;
        width: 150%;
        border-bottom-left-radius: 100%;
            border-bottom-right-radius: 100%;
        background-color: #AECE33;
            border: 3px solid #6B6A65; border-top: 0;
    }
}

enter image description here

Upvotes: 4

Views: 4450

Answers (3)

himanshu
himanshu

Reputation: 1797

DEMO1

.cover{ height:100px; width:300px; overflow:hidden;}
.set {
    background-color: #80C5A0;
    width: 400px;
    height: 100px;
    margin-left:-50px;
    border-radius: 50% / 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

<div class="cover">
    <div class="set"></div></div>

and this is what you want

DEMO2

and for creating a fluid menu as you asked below use DEMO3

Upvotes: 4

web-tiki
web-tiki

Reputation: 103800

Here is a responsive version of this shape using a pseudo element to minimize markup :

DEMO

Output :

Round bottom menu item

HTML :

<div>Home</div>

CSS :

div {
    position:relative;
    width:40%; height:100px;
    overflow:hidden;
    margin:10px auto;
    text-align:center;
    font-size:1.8em;text-transform:uppercase;line-height:90px;color:#fff;
}
div:before {
    content:'';
    position:absolute;
    top:0; left:-25%; bottom:4px;
    width: 150%;
    background-color: #AECE33;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border:4px solid #6B6A65;
    border-top:0;
    z-index:-1;
}

Upvotes: 5

Vinod VT
Vinod VT

Reputation: 7159

Try this CSS

div {
background-color: #80C5A0;
width: 400px;
height: 100px;
-webkit-border-radius:  100% 100% 100% 100% / 0% 0% 100% 100%;
 border-radius: 100% 100% 100% 100% / 0% 0% 100% 100%;
}

jsfiddle

Upvotes: 3

Related Questions