Creating tabs without rectangles

Asked

Viewed 37 times

0

I need a little help. I have these tabs that are working, but visually I don’t like the rectangles where I click and I wanted to change.

Original: http://jsfiddle.net/f6jk903s/

I want to remove the flaps:

O que eu tenho

And put something like this:

O que eu quero

I’ve tried several ways but I can’t replace those flaps.

html css

1 answer

1

You can solve this using the property border-radius. Since only the edges on top of the element are required, you use the specific properties for each side (the border-radius is simply a shortened version of the 4 for each side. Example:

.tab {
    width:70px;
    height:30px;
    border:1px #ccc solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display:inline-block;
}
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>

I updated your Jsfiddle code: http://jsfiddle.net/f6jk903s/1/. Notice that I took out some unnecessary things, like the left edge on the ul.tabs.

To learn more about the property: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

  • Right, thank you very much. But it is possible to remove these buttons to change the news and put as I have in image 2?

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.