Div com cantos arredondadose inclunados

[rpmarques 3]

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

[L. Henrique 179]

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 3]

Fazendo isto, a div aparece assim.

 

[Maujor 144]

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 3]

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 144]

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 3]

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 144]

Então marque o tópico como resolvido.