Publicado em 17 de jun.

Div com cantos arredondadose inclunados

Bom dia pessoal, alguém pode me dar uma ajuda, tenho que fazer umas divs com os cantos arredondados e inclinados, já consegui inclinar eles, mas não consegui deixar arredondados, segue o código que estou usando.

.exemplo {
 color: #fff;
 position: relative;/*faz os elementos pseudos acompanharem o elemento com a classe*/
 display: inline-block;
 background-color: #CC0000;
 line-height: 20px; /*Centraliza o texto*/
 height: 20px;
 padding:0 10px;
 margin: 0 10px;
}

.exemplo:before, .exemplo:after {

 content: "";
 width: 0px;
 height: 0px;
 top: 0px;
 position: absolute;
}

.exemplo:before {

 border-top: 20px solid transparent;
 border-right: 5px solid #CC0000;
 left: -5px;
}

.exemplo:after {

 border-bottom: 20px solid transparent;
 border-left: 5px solid #CC0000;
 right: -5px;
}

Se alguém puder me ajudar...

Obrigado...

Discussão (7)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

L. Henrique· 17 de jun.

Rpmarques,

Qualquer elemento que você quiser deixar com as bordas arredondadas, use a propriedade: border-radius. Veja um exemplo:

.classe {
 border-radius: 40px;
 /* ou pode ser em porcentagem */
 border-radius: 10%;
}

Abraços!

rpmarques· 17 de jun.

Fazendo isto, a div aparece assim.

/applications/core/interface/imageproxy/imageproxy.php?img=http://oi67.tinypic.com/vghoba.jpg&key=7202b6e1f5c611a435bbf3911638c523adc07588ce825b1381d9681411f528d0" alt="vghoba.jpg" />

Maujor· 17 de jun.

Eis uma maneira de obter este efeito:

HTML:

<div class="exemplo">
 <p>Texto dentro do DIV</p>
</div>

CSS:

.exemplo {
 color: #fff;
 display:inline-block;
 padding:0 20px;
 background-color: #c00;
 border-radius:10px;
 transform: skew(-30deg);
 }

.exemplo * {

 transform: skew(30deg);
 }

Se dentro do DIV existir somente texto, esse exemplo resolve, caso contrário você tem que adaptar a CSS para se adequar aos conteúdos do DIV.

rpmarques· 17 de jun.

Obrigado Majur, só mais uma coisinha, se eu quiser deixar a div maior?

exemplo, se eu usar o height: ele "cresce" pra baixo, tem algum modo de que o texto fique no meio?

Maujor· 17 de jun.

Altere o valor de padding para controlar as dimensões vertical e horizontal do DIV e manter o texto no meio.

Para que as dimensões independam das margens do texto declare margin:0 para o parágrafo que contém o texto.

rpmarques· 17 de jun.

>
Altere o valor de padding para controlar as dimensões vertical e horizontal do DIV e manter o texto no meio.

Para que as dimensões independam das margens do texto declare margin:0 para o parágrafo que contém o texto.

Obrigado Maujor, era isto mesmo que eu precisava.

Maujor· 17 de jun.

Então marque o tópico como resolvido.