Border-radius deixando uma pequena margem no canto

[rikaschmitt 54]

Olá.

 

Estou usando a propriedade "border-radius" no css para arredondar os cantos de uma div.

Dentro dessa div há duas imagens:

- uma é uma imagem de fundo;

- a outra é uma pequena imagem branca, posicionada em cima da primeira, para "parecer" que o canto é reto. (tinha criado um tópico sobre isso, e resolvi usar uma imagem mesmo)

 

O problema é que nota-se uma pequena margem no canto da borda, mostrando a imagem do fundo. Já tentei deixar a imagem de cima (branca) com valores negativos para recuar mais, mesmo assim não adiantou.

 

Exemplo:

 

Alguma sugestão?

[jgustavo99 85]

Olá! Poste seu código, HTML e CSS.

[rikaschmitt 54]

HTML

<div class="obras left">

<div class="obra-thumb"><a href=""><img src="img/EXEMPLO_obra1.jpg" /></a>

<!-- canto reto --><div class="cantinho-reto"><img src="img/cantoESQ_reto.png" /></div><!-- fixo em todas as obras da home -->

</div>

<div class="obra-categoria"><img src="img/icon_cat_civil.png" /> CIVIL</div>

<div class="obra-titulo"><a href="">Lorem ipsum dolor sit amet consectetuer.</a></div>

</div>

CSS

.cantinho-reto { position: absolute; top:-1px; left:-1px; width:28px; height:28px; }

#content-index .obra-thumb img { max-width:321px; }

#content-index .obras { margin-top:28px; height:288px; width:321px; border-bottom:1px #BBBBBB solid; }

#content-index .obras .obra-thumb { 

width:321px;

height:177px;

background-color:#BBBBBB;

position: relative;

overflow: hidden;

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright: 5px;

border-top-left-radius: 5px;

border-top-right-radius: 5px;

}

[le0souza 0]

Seu codigo nao adiantou muito mas vamos la deixa eu ve se intendi o que voce quis dizer



HTML

<div class="banner">
<div class="faixa"></div>
<img src="sua foto" alt="" />
</div>

CSS

.banner{

padding: 20px;

-webkit-border-radius: 20px 20px 20px 20px;

border-radius: 20px 20px 20px 20px;

width: 600px;

height: 350px;

background: #000;

position: relative;

}

.faixa{

position: absolute;

width: 100px;

height: 100px;

background: #dc0000; /*voce tem que coloca background a imagem "triangulo"*/

left: 0px;

top: 0px;

}

[CL4nG 36]

Veja:

<style>

.topo{
    background: #000 url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
    position: relative;
    height: 100px;
    width: 250px;
}

.topo:after{
    content:'';
    position:absolute;
    border-left:30px solid #fff;
    top:-25px;
    bottom:-10px;
    left:-15px;
    -moz-transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
}
</style>

<div class="topo"></div>

Resultado:

Se aumentar o tamanho da div, você tem que recuar a esquerda até tampar a "sujeira"...

Outro exemplo:

<style>

.topo{
	background: #000 url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
    position: relative;
    height: 250px;
    width: 250px;
}

.topo:after{
    content:'';
    position:absolute;
    border-left:30px solid #fff;
    top:-25px;
    bottom:-10px;
    left:-55px;
    -moz-transform:rotate(25deg);
    -webkit-transform:rotate(25deg);
}
</style>

<div class="topo"></div>

Resultado:


Eu fiz a borda somente com CSS. Se você fazer com imagem você tem que levar em consideração que ao redimensionar a página ou o monitor tiver uma resolução maior, a imagem ficará desfocada ou esticada.

[rikaschmitt 54]

Valeu gente.

Mas de fato fica essa bordinha mesmo. Acredito que é algum "bug" do border-radius..

 

Vou por ela pra fora e ver como fica.

 

 

 

Edit: Funcionou! Tive que por a div da imagem fora da div dos cantos arredondados.