Can I get these curved corners with CSS?

Go To StackoverFlow.com

2

I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.

As such, how can I do this in CSS? (if at all?)

As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).

Any help would be great.

Thanks

enter image description here

2012-04-03 19:54
by Thomas Clayson
Let's see the markup you have going... : - Matthew Blancarte 2012-04-03 20:14
Well atm its just a div with a background img (the nature pic) with an abs-pos div with padding in bottom left (the button). This gives me the image in my post, but without the curves on the corners that the arrows are pointing to. : - Thomas Clayson 2012-04-03 20:16
Depends on the support you need to offer for the website. This can be done in pure CSS, including the button but not the soft text shadow in it if IE8 and below aren't a problem - sg3s 2012-04-03 20:16
Ah, ignore the text shadow. :) It'll degrade gracefully. :p Its the corners I'm pointing out thats the bit I'm struggling with. : - Thomas Clayson 2012-04-03 20:24
not quite a duplicate, but similar http://stackoverflow.com/questions/6444129/is-it-possible-to-have-a-non-rectangular-di - MikeM 2012-04-03 20:53


1

You don't have to split your image at all, only the container divs.

Let me detail a bit: You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.

So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.

On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.

Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.

I'll be putting a small demo together to better illustrate the idea. After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.

2012-04-03 20:15
by Victor Nițu
This is a good explanation. :) Thanks for this! I should have worked this out myself! lol - Thomas Clayson 2012-04-03 20:31
Unfortunately, my web server is acting weird right now, and I cannot provide an alive link. Please let me know if anything goes wrong though ;- - Victor Nițu 2012-04-03 20:48
Aha! No worries mate, I think I understand what you're talking about anyway, so don't fret. :) I really appreciate your help. : - Thomas Clayson 2012-04-03 21:13


3

I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:

Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.

Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.

The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.

2012-04-03 20:04
by Eric J.
Thanks for this. I appreciate it very much. After reading @Victor's answer I think I understand where you were coming from. + - Thomas Clayson 2012-04-03 21:12


0

That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.

2012-04-03 20:03
by Sven Bieder
How do you do the inner rounding the arrows point at without splitting the nature image - Eric J. 2012-04-03 20:05
Set the z-index(s) and it will overlay the background image - Christopher Marshall 2012-04-03 20:05
You have one div a the top with full width that has border-bottom-left-radius. The same for the div bottom right. Then you get the areas you pointed with the arrows. The inner curve is from the bottom right div with border-top-right-radius - Sven Bieder 2012-04-03 20:10


-1

This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.

Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.

The best way to figure out how it's done is to read the source of the page you found it on.

For convenience: If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.

2012-04-03 19:57
by awiebe
Hey, thanks for the response. I know about corner-radius, and I'm good with just using CSS3. However I don't know how to get these corners after overlaying the button (with padding) or however else you would do this - Thomas Clayson 2012-04-03 20:02
Did you mean <code>border-radius</code>...? FYI: CSS3 is not a solid thing. It's composed of many modules. Many CSS3 features are already implemented in browsers - Rob W 2012-04-03 20:08
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.

If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want - awiebe 2012-04-03 20:08

@awiebe: If you have MSIE, you can press F12 for an excellent HTML inspector as well - Eric J. 2012-04-03 20:12
yeah border-radius. :) oops! lol - Thomas Clayson 2012-04-03 20:12
I didn't see this on a page, or else I would have looked at the source! :) This is a design I've been sent which I need to translate into a website. : - Thomas Clayson 2012-04-03 21:11