Eu tenho uma div que tem essas características:
div#circulo{
height:200px
width:200px
background-image: url(minhaimagem.png);
background-size:200px;
}
A imagem que se trata é de um circulo centralizado, com o fundo transparente. Então no meu html eu coloquei pra a div ser um link, deste modo:
<a href="proximapagina.html"><div id=circulo>...conteudo...</div></a>
Só que a área clicável ficou, como esperado, no quadrado inteiro da imagem. Tem como fazer com que a área clicável seja só o circulo interno??