0

Preciso de uma pequena ajuda. Tenho estas abas que estão a funcionar, mas visualmente não gosto dos retângulos onde clico e queria mudar.

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

Quero retirar as abas:

O que eu tenho

E colocar algo deste gênero:

O que eu quero

Já tentei varias formas mas não consigo substituir as tais abas.

1 Resposta 1

1

Você pode resolver isso usando a propriedade border-radius. Como só é necessário as bordas em cima do elemento, você usa as propriedades específicas para cada lado (o border-radius é simplesmente uma versão encurtada das 4 para cada lado. Exemplo:

.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>

Dei um update no seu código do JSFiddle: http://jsfiddle.net/f6jk903s/1/. Repare que eu tirei umas coisas desnecessárias, como a borda à esquerda na ul.tabs.

Para saber mais sobre a propriedade: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

1
  • Correcto, desde de já muito obrigado. Mas é possível retirar esses botões para mudar de noticia e colocar como tenho na imagem 2?
    – ChrisAdler
    Commented 15/04/2015 às 10:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .