Come posso creare un cerchio o un quadrato con un solo CSS - con un centro vuoto?
-
26-09-2019 - |
Domanda
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.
Soluzione
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>
Altri suggerimenti
È possibile utilizzare caratteri speciali per fare un sacco di forme. Esempi: http://jsfiddle.net/martlark/jWh2N/2/
<table>
<tr>
<td>hollow square</td>
<td>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</td>
</tr>
</table>
Molti di più può essere trovato qui: HTML Caratteri speciali
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" />
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>
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>
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.
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.