CODEWITHSUNDEEP
javascripthtmlcss
Maha1419
Maha1419

Reputation: 191

rounded corner using images

The below approach would be very older one but still & it might be very simple for an experienced people.

I have created one rounded corner panel with shadow using Photoshop. And I have sliced into three images

a) leftpanel b) centerpanel c) rightpanel

Here is my coding for css

.leftpanel
{
    background:url('../images/panelleft.png') no-repeat;
    float:left;
    width:19px;
    height:285px;
}
.centerpanel
{
    background:url('../images/panel_center.png') repeat-x;
    height:285px;
}
.rightpanel
{
    background:url('../images/panel_right.png') no-repeat;
    position:absolute;
    float:right;
    width:9px;
    height:285px;
}

And here is my html code for the same

<div style="width:300px;">
    <div class="leftpanel">&nbsp;</div>
    <div class="centerpanel">
        heading
        <div class="rightpanel">&nbsp;</div>
    </div>
</div>

The output was showing wrongly

left & center is coming perfectly but the right image was not showing

Kindly help me

Thanks & Regards Mahadevan

Upvotes: 1

Views: 98

Answers (2)

Mohsen Safari
Mohsen Safari

Reputation: 6795

you can use :after and :before for doing that like this:

jsFiddle (working on IE7 too)

HTML

<div class="panel">
    <div id="left"></div>
    header
    <div id="right"></div>
</div>

CSS

div.panel:before, #left
{
    content:"";
background:url('https://i.sstatic.net/Kcs8F.png') no-repeat;
position:absolute;
top:0;
left:-9px;
width:9px;
height:100px;
}

.panel
{
background:url('https://i.sstatic.net/uOPT5.png') repeat-x;
height:100px;
width:200px;
position:relative;
margin:0 9px;
}

div.panel:after, #right
{
content:"";
background:url('https://i.sstatic.net/4sXib.png') no-repeat;
position:absolute;
top:0;
right:-9px;
width:9px;
height:100px;
}

create your background and slice it to three part: left, right, center.

here is my sliced background:

enter image description here enter image description here enter image description here

then set width and height to your :before and :after. note that you need to set margin-left or margin-right equal to the element width. in this case it is 9px;

update:

changed CSS and HTML for working in IE6 and IE7.

Upvotes: 3

Nitesh
Nitesh

Reputation: 15779

You need to remove position:absolute; from .rightpanel to display it properly.

Also, make the below changes to your HTML.

<div style="width:300px;">
   <div class="rightpanel">&nbsp;</div>       
   <div class="centerpanel">heading</div>
   <div class="leftpanel">&nbsp;</div>
</div>

If the above does not work, keep your position:absolute; from .rightpanel and just change the order of HTML as mentioned above.

Hope this helps.

Upvotes: 2

Related Questions