CODEWITHSUNDEEP
jqueryhtmlcsswebphotoshop
Shikhil Bhalla
Shikhil Bhalla

Reputation: 392

I want curved div like this image i posted

Curved div

In this image, the navigation bar is in a semi-circle bent div. How can I recreate this effect? I want the code to create it whether it requires CSS or Javascript.

I tried this:

body {
    background-color:#900;
    margin:0;
}
#first {
    width:38%;
    height:40px;
    background-color:#963;
    -webkit-transform:rotate(8deg);
    float:left;
}

#middle {
    width:20%;
    height:250px;
    background-image:url(file:///E|/bollywoodGrill/website3/images/logo.jpg);
    float:left;
}

#second {
    width:38%;
    height:40px;
    background-color:#963;
    -webkit-transform:rotate(175deg);
    float:left;
    margin-top:10px;
}

With this HTML:

<div id="first"></div>
<div id="middle"></div>
<div id="second"></div>

http://jsfiddle.net/CzePX/

Not-so-curved div

How can I make this look rounded?

Upvotes: 0

Views: 361

Answers (1)

Stephan Wagner
Stephan Wagner

Reputation: 990

With only CSS or JavaScript you will have a hard time creating anything close to the design in the image. This is clearly a photoshop design, and it also supposed to look like a photoshop design. If you want to get as close as possible to the semi circle in the picture, here is a fiddle: http://jsfiddle.net/2QwmW/

semi-circle

<div class="container">
    <div class="circle"></div>
</div>

.container {
    width: 800px;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #ab632a;
}

.circle {
    position: absolute;
    z-index: 1;
    width: 2000px;
    height: 2000px;
    border: 50px solid rgba(80, 0, 0, .5);
    left: 50%;
    margin-left: -1050px;
    top: -1950px;
    border-radius: 50%;
}

.container:before,
.container:after {
    content: '';
    width: 100px;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
}

.container:before {
    left: 0;
    background-image: linear-gradient(to right, #ab632a, rgba(170, 98, 43, 0));
}

.container:after {
    right: 0;
    background-image: linear-gradient(to left, #ab632a, rgba(170, 98, 43, 0));
}

But this is only the semi-circle, the rotated text can be inserted with absolute positions and -webkit-transform:rotate(XXdeg);

Upvotes: 2

Related Questions