Use three div to create a banner round corner effect in css

Question

I want use three div to create a round effect,like

<div class="wrapper">
   <div class="left-corner"></div>
   <div class="center-repeat"></div>
   <div class="right-corner"></div>
</div>

the .left-corner and .right-corner have a only corner background image css:

.wrapper
{
   width:100%
   height:110px;
}
.left-corner
{
   background:...
   width:110px;
   height:110px;
   float:left
}
.right-corner
{
   background:...
   width:110px;
   height:110px;
   float:right
}

but how should I render the middle div I tried use width:100% but the corner div will be push and become another row how can I set the three div in a line and look normal?

Wouldn't the `border-radius` property work? http://www.w3schools.com/cssref/css3_pr_border-radius.asp — Nadh, Apr 27 '12 at 06:50
@NADH this is a great alternative, but you know as well as I that only newer browsers support this. If it's imperative to the OP's design, he may not want the possibility of a sharp corner in his image(s). +1 for pointing it out though. — JT Smith, Apr 27 '12 at 06:52
And in your code above, you have 2 classes of `left-corner`. Hopefully this is a typo on this site and not in actual CSS. If it is, you will need to fix it in your code or you will never get it to work properly — JT Smith, Apr 27 '12 at 06:53

score 0 · Accepted Answer · answered Apr 27 '12 at 06:49

0

If your wrapper is set in percentages, then I would think it best to keep it's children in percentages as well, perhaps use a 33%, 33% and 34% to get the 100%. For the middle, or center-repeat I think you may need to use float: left as well, so it snugs up to the left-corner.

answered Apr 27 '12 at 06:49

JT Smith

741
4
12

@NikhilBaliga:the example you give to me have a problem:the left-corner and right-corner doesn't fixed,the background image I give to it is a fixed size image, no repeat – hh54188 Apr 27 '12 at 06:54
@Candy Good point, then perhaps the middle should be a 100%, to fill the difference between the two sides? – JT Smith Apr 27 '12 at 06:54
@NikhilBaliga Thanks for helping with the fiddle. I was trying to make one but couldn't think of images to use... Didn't consider using background color to show the alignment. Thanks. +1 – JT Smith Apr 27 '12 at 06:55
@hh54188 then what is the fixed width of your images? You provided little information in your example above. The fiddle is meant to show the relative alignment of your 3 divs, which it does. Using those general guidelines, you should be able to align all 3 of your divs, regardless if they are all fixed width or relative. If you need fixed width of your divs, then use your `px` but as it shows, using the floats as they are should give your the results you seek. And if your images are fixed width, perhaps you should use a fix width container as well? It will help with your layout breaking – JT Smith Apr 27 '12 at 07:02

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

Have you tried using border-radius property?

You can just use the center div and border radius any other corner.
https://developer.mozilla.org/en/CSS/border-radius
Support for "border-radius" in IE

<div class="wrapper">
    ... content inside wrapper ... 
</div>

.wrapper
{
    width: 100%;
    height: 110px;
    border-radius: 5px;
}

edited May 23 '17 at 10:24

Community

1
1

answered Apr 27 '12 at 06:54

jao

1,194
1
11
17

This will work, but as I mentioned above in my comment, it won't work except in modern browsers. The other issue I have had with this in the past is if your entire CSS isn't written in CSS3 then using `border-radius` it will fail validation, if this is a concern for the designer. – JT Smith Apr 27 '12 at 06:57

score 0 · Answer 3 · answered Apr 27 '12 at 07:45

Hi i thing you should this

Css

.wrapper
{
   width:100%
   height:110px;
    overflow:hidden;
    border:solid 5px black;
    border-radius:25px;
}
.left-corner
{
   background:red;
   width:110px;
   height:110px;
   float:left
}
.right-corner
{
   background:green;
   width:110px;
   height:110px;
   float:right
}


.center-corner{
width:100%;
    background:yellow;
    height:110px;
}

HTML

<div class="wrapper">

    <div class="left-corner">Left</div>
    <div class="right-corner">Right</div>
    <div class="center-corner">Center</div>    
</div>

Live demo http://jsfiddle.net/pTxrW/

score 0 · Answer 4 · answered Apr 27 '12 at 08:57

0

Here's my try: jsfiddle.
Left and right corners are 10px less height than center block so it's easier to see borders between them.

answered Apr 27 '12 at 08:57

Ilia Akhmadullin

1,573
1
10
16

Use three div to create a banner round corner effect in css

4 Answers4