CODEWITHSUNDEEP
jqueryhtmlcss
user1427811
user1427811

Reputation:

div rounded without image

I want to make a site with this graphics, but my problem is the curve, I don't want to create an image of the curve because the layout is resizable in base of resolution ad because I have to make some transition inside. Is possible with jQuery or css 3 to make a layout like this? I know about radius border etc, but like this I don't know how to do. Is possible?The background is white but in the left and int he right I have some div with nes and rss for example. (note: there are shadow on the border left and right of the curve

enter image description here

Upvotes: 0

Views: 179

Answers (4)

Saurabh Kumar
Saurabh Kumar

Reputation: 5945

Checkout this solution:

live demo: http://codepen.io/anon/full/emAHu
source code: http://codepen.io/anon/pen/emAHu

Features:
* You can put content inside the div which is the layout you can set as the wrapper of your site.
* Everything is %age based, that means everything is flexible

html

<div>
  <p>Content inside the paragragh</p>
</div>

css

div{
  position: absolute;
  background: url("http://placehold.it/400x400");
  width: 400px;
  height: 400px;
  border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
    /* border-radius: 40% 0 0 40%; */
  padding: 25px;
}


div:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: white;
  position: absolute;
  top: 0;
  left: 60%;
  border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
  /*  border-radius: 40%; */
}

Upvotes: 0

Clyde Lobo
Clyde Lobo

Reputation: 9174

Ok I played around with Kyle's solution and managed to get something

Fiddle : http://jsfiddle.net/G6SHH/3/

div
{
    height: 500px;
    width: 200px;
    background: #ccc;
    border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
}


div:after {
    background-color: white;
    border-radius: 50px 0 0 50px / 250px 0 0 250px;
    content: "";
    display: block;
    height: 498px;
    position: relative;
    right: -154px;
    width: 138px;
}

This will only work in modern browsers

Upvotes: 2

Aman J
Aman J

Reputation: 1855

I guess you have to play around with Radius,

Here is an link for what I tried : http://jsfiddle.net/amandeepj/45XzA/ However, I was not able to acheive concave border i.e right side border of DIV, as it is shown in image that is in question.

Anyways, I would have used Images as a background. In such case.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

You can get the left side to kind of do it, but not the right side as border-radius doesn't accept negative values.

div
{
    height: 500px;
    width: 200px;
    background: #ccc;
    border: 3px solid #333;
    border-radius: 50px 0px 0px 50px / 250px 0px 0px 250px;
}​

http://jsfiddle.net/G6SHH/

Of course, you could always layer over another div on the top, but that's unneeded markup and to be honest just looks weird.

http://jsfiddle.net/G6SHH/1/

You're going to have to use an img for this.

Upvotes: 1

Related Questions