Come posso creare un cerchio o un quadrato con un solo CSS - con un centro vuoto?

Question

Si deve solo essere sostanzialmente una descrizione dei quadrato o un cerchio - che posso lo stile di conseguenza (. Cioè cambiare il colore di quello che voglio, modificare lo spessore del bordo, ecc)

Vorrei applicare tale cerchio o un quadrato sopra qualcos'altro (come un'immagine o qualcosa del genere) e la parte centrale dovrebbe essere scavato, in modo da poter vedere l'immagine sotto il quadrato o un cerchio.

Io preferirei per essere principalmente CSS + HTML.

Answer 1

Prova questo

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>

Più qui

Answer 2

È possibile utilizzare caratteri speciali per fare un sacco di forme. Esempi: 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>

Molti di più può essere trovato qui: HTML Caratteri speciali

Answer 3

Non so di un semplice css (2.1 standard) soluzione -solo per i cerchi, ma per piazze si può fare facilmente:

.squared {
    border: 2x solid black;
}

Quindi, utilizzare il seguente codice html:

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

Answer 4

Se si desidera che il div per mantenere la forma circolare di essa la anche se si cambia la sua larghezza / altezza (utilizzando js per esempio) di impostare la distanza per il 50%. Esempio: css:

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

html:

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

Answer 5

Circle Time! :) Facile modo di fare un cerchio con un centro vuoto: l'uso border-radius, dare l'elemento di un bordo e senza sfondo in modo da poter vedere attraverso di essa:

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

Per quanto ne so non c'è modo cross-browser compatibile per fare un cerchio con solo i CSS e HTML.

Per la piazza credo che si potrebbe fare un div con un bordo e un z-index superiore a quello che si sta mettendo sopra. Non capisco il motivo per cui si avrebbe bisogno di fare questo, quando si può solo inserire un bordo sull'immagine o "qualcosa" in sé.

Se qualcun altro sa come fare un cerchio che è cross browser compatibile con CSS e HTML solo, mi piacerebbe sentire su di esso!

@Caspar Kleijne border-radius non funziona in IE8 o al di sotto, non è sicuro su 9.

Answer 7

Poco dopo aver trovato questa domanda ho trovato questi esempi in Trucchi CSS: http: // CSS-trucchi .com / examples / ShapesOfCSS /

Copiato in modo che non c'è bisogno di fare clic su

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

Ci sono molti altri esempi di forma nel link qui sotto, ma si dovrà test per la compatibilità del browser.