Neste artigo de CSS continuaremos um exercício anterior, no qual realizávamos uma caixa com CSS para colocar conteúdo. Com o mesmo esquema relatado no artigo anterior, vamos realizar outro tipo de caixa -com esquinas arredondadas-, mudando unicamente as imagens utilizadas.

Antes de começar a leitura deste artigo deve ser lido o artigo precedente.

Também é aconselhado ver o exemplo que vamos construir.

Caia com esquinas arredondadas

O exemplo a seguir é para criar um container com esquinas arredondadas. Os arredondados das esquinas serão feitos com imagens, de maneira que se possa variar a cor da caixa com as mesmas imagens.

Para conseguir isto vamos utilizar as seguintes imagens:

Estas 2 imagens são transparentes, menos o arredondado dos lados, que tem a cor branca. Devido a isso, estas caixas com esquinas arredondadas só poderão ser utilizadas sobre um fundo branco. Se quisermos fazer uma caixa para utilizar sobre outro fundo, temos que refazer estas imagens mudando a cor branca.

O código HTML continua sendo o mesmo:

<div class="caixaacima">
<div class="cajaabaixo">
Lorem ipsum dolor sit amet, consectetuer
…
</div>
</div>

Agora vemos o código CSS. Têm poucas variações com respeito a do exemplo anterior:

.caixaacima{
width: 600px;
background-image: url("arriba.gif");
background-position: top center;
background-repeat: no-repeat;
background-color: #660000;
color: #ffffff;
}
.caixaabaixo {
background-image: url("abajo.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 5px 5px 5px 5px;
}

Há que observar que definimos uma cor de fundo na classe caixaacima. Se quisermos que a caixa varie de cor, simplesmente haveria que mudar essa cor de fundo.

O resultado pode ser visto em uma página a parte.