CODEWITHSUNDEEP
htmlcss
WhatisSober
WhatisSober

Reputation: 988

Tab like structure in CSS with rounded corners

I have a CSS rectangle that has rounded corners. I would like to add a tab like structure on top of it.

This is what I am talking about. https://i.sstatic.net/sOP6w.png

I tried making two different elements and adding together with positioning but it doesnot look real(mainly because of shadow)l. Can we make it on CSS on a single element?

Thanks in advance!

Edit(more details):

I have a rectangle with rounded border as follows:

#mybox
{
width: 800px;
height:400px;
border:thin;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;   
border-color:black;
box-shadow: 3px 3px 10px 5px #000;  
}

I want to tweak/stretch the top part to look like this.

Upvotes: 1

Views: 2501

Answers (3)

Ryan Potter
Ryan Potter

Reputation: 835

You can use the :before selector to create what you're asking for.

Here's a quick implementation to give you an idea on how to use it:

<div class="foo"></div>

.foo {
    width: 200px;
    height: 100px;
    border: 4px solid #000;
    margin-top: 24px;
    position: relative;
    -webkit-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.foo:before {
    display: block;
    height: 20px;
    width: 30px;
    border: 4px solid #000;
    border-bottom-width: 0;
    content: " ";
    position: absolute;
    left: 0;
    top: -24px;
    background: #fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

Upvotes: 1

Zeddy
Zeddy

Reputation: 2089

Try this code...

<div style="width: 93px; height: 72px;">
  <div style="width: 93px; height: 13px; background-image: url('tabtop.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
  <div style="width: 93px; height: 59px; background-image: url('tabbottom.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
</div>

With the images below... If you size the divs to the image you should be fine and use them as a BACKGROUND property means you can have text in the actual divs

enter image description here

enter image description here

Upvotes: 2

Tucker
Tucker

Reputation: 7362

why not use something prepackaged like bootstrap or jquery ui which have tab functionality? i can understand if you want to build your own thing but maybe you want a shortcut?

bootstrap: http://twitter.github.com/bootstrap/

jquery ui: http://jqueryui.com/

there are numerous such packages available to help your ui development but these are two common ones

Upvotes: 1

Related Questions