Como faço para criar um círculo ou quadrado com apenas CSS - com um centro oco?

Question

Deveria basicamente ser um esboço do quadrado ou do círculo - que eu posso estilizar de acordo (ou seja, mudar a cor para o que eu quiser, mudar a espessura da fronteira, etc.)

Eu gostaria de aplicar esse círculo ou quadrado sobre outra coisa (como uma imagem ou algo assim) e a parte do meio deve ser escavada, para que você possa ver a imagem abaixo do quadrado ou do círculo.

Eu preferiria que fosse principalmente CSS + HTML.

Answer 1

Tente isso

div.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

div.square {
  border: solid 21px #f0f;
  width: 50px;
  height: 50px;
}

<div class="circle">
  <img/>
</div>
 <hr/>
<div class="square">
  <img/>
</div>

Mais aqui

Answer 2

Você pode usar caracteres especiais para fazer muitas formas. Exemplos:http://jsfiddle.net/martlark/jwh2n/2/

<table>
  <tr>
    <td>hollow square</td>
    <td>&#9633;</td>
  </tr>
  <tr>
    <td>solid circle</td>
    <td>&bull;</td>
  </tr>
  <tr>
    <td>open circle</td>
    <td>&#3664;</td>
  </tr>

</table>

Muitos mais podem ser encontrados aqui: Personagens especiais HTML

Answer 3

Não conheço uma solução simples de CSS (2,1 padrão) para círculos, mas para quadrados você pode fazer facilmente:

.squared {
    border: 2x solid black;
}

Em seguida, use o seguinte código HTML:

<img src="…" alt="an image " class="squared" />

Answer 4

Se você deseja que sua div mantenha sua forma circular, mesmo se você alterar sua largura/altura (usando JS, por exemplo), defina o raio para 50%. Exemplo: CSS:

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

html:

<div class="circle"></div>

Answer 5

Hora do círculo! :) maneira fácil de fazer um círculo com um centro oco: use radius de fronteira, dê ao elemento uma borda e nenhum fundo para que você possa ver através dele:

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    border-radius: 100%;
    width:100px;
    border:solid black 2px;
}

body{
    background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}

<div></div>

Answer 6

Que eu saiba, não existe uma maneira compatível com o navegador cruzado de fazer um círculo apenas com CSS e HTML.

Para o quadrado, acho que você poderia fazer uma div com uma borda e um índice Z mais alto do que o que está colocando. Não entendo por que você precisaria fazer isso, quando pudesse simplesmente colocar uma borda na imagem ou "algo" em si.

Se alguém souber como fazer um círculo que seja compatível com o navegador cruzado apenas com CSS e HTML, eu adoraria ouvir sobre isso!

@Caspar Kleijne-Radius de fronteira não funciona no IE8 ou abaixo, não tenho certeza de 9.

Answer 7

Logo depois de encontrar essas perguntas, encontrei esses exemplos sobre truques CSS: http://css-tricks.com/examples/shapesofcss/

Copiado para que você não precise clicar

.square {
  width: 100px;
  height: 100px;
  background: red;
}
.circle {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

<div class="square"></div>
<div class="circle"></div>

Existem muitos outros exemplos de forma no link acima, mas você precisará testar a compatibilidade do navegador.