¿Cómo se crea un círculo o un cuadrado con sólo CSS - con un centro hueco?

Question

Debe ser, básicamente, sólo un esbozo del cuadrado o un círculo - que puede estilo en consecuencia (. Es decir, cambiar el color a lo que quiera, cambiar el grosor del borde, etc)

Me gustaría aplicar ese círculo o un cuadrado sobre otra cosa (como una imagen o algo así) y la parte media debe ser vaciado, para que pueda ver la imagen debajo del cuadrado o un círculo.

Yo preferiría para que sea principalmente CSS + HTML.

Answer 1

Probar

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>

Más aquí

Answer 2

Puede usar caracteres especiales para hacer un montón de formas. Ejemplos: 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>

Muchos más se puede encontrar aquí: HTML caracteres especiales

Answer 3

No sé de un css sencillo (2.1 estándar) -sólo solución para los círculos, pero para los cuadrados se puede hacer fácilmente:

.squared {
    border: 2x solid black;
}

A continuación, utilice el siguiente código html:

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

Answer 4

Si usted quiere que su div para mantenerlo de forma circular, incluso si cambia su anchura / altura (usando js, ??por ejemplo) establecer el radio a 50%. Ejemplo: css:

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

HTML:

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

Answer 5

Tiempo del círculo! :) Una forma sencilla de hacer un círculo con un centro hueco: utilización frontera de radio, dar al elemento un borde y sin fondo para que pueda ver a través de él:

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

A mi conocimiento no hay manera compatible entre navegadores para hacer un círculo con CSS y HTML solamente.

En la plaza Creo que se puede hacer un div con un borde y un índice z mayor que lo que está poniendo encima. No entiendo por qué se necesita para hacer esto, cuando uno podía poner un borde en la imagen o "algo" en sí.

Si alguien sabe cómo hacer un círculo que es transversal navegador compatible con CSS y HTML solamente, me encantaría saberlo!

@Caspar Kleijne la frontera de radio no funciona en IE8 o por debajo, no está seguro acerca 9.

Answer 7

Poco después de encontrar esta pregunta me encontré con estos ejemplos de trucos CSS: http: // css-tricks .com / examples / ShapesOfCSS /

Copiado por lo que no tiene que hacer clic en

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

Hay muchos otros ejemplos de la forma en el siguiente enlace, pero que tendrán que prueba para la compatibilidad del navegador.