Comment puis-je créer un cercle ou un carré avec seulement CSS - avec un centre creux?

Question

Il devrait juste être essentiellement un aperçu du carré ou un cercle - que je peux le style en conséquence (.-À-dire changer la couleur à ce que je veux, changer l'épaisseur de la bordure, etc.)

Je voudrais appliquer ce cercle ou sur autre chose carré (comme une image ou quelque chose) et la partie médiane doit être creusée, de sorte que vous pouvez voir l'image sous le carré ou un cercle.

Je préférerais qu'il soit principalement CSS + HTML.

Answer 1

Essayer cette

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>

Plus

Answer 2

Vous pouvez utiliser des caractères spéciaux pour faire beaucoup de formes. Exemples: 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>

Beaucoup d'autres peuvent être trouvés ici: HTML Caractères spéciaux

Answer 3

Je ne sais pas un simple css (2.1 standard) solution -seulement pour les cercles, mais pour les places que vous pouvez faire facilement:

.squared {
    border: 2x solid black;
}

puis, utilisez le code html suivant:

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

Answer 4

Si vous voulez que votre div pour le garder sa forme circulaire même si vous changez sa largeur / hauteur (à l'aide js par exemple) définir le rayon à 50%. Exemple: css:

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

html:

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

Answer 5

Cercle temps! :) Un moyen facile de faire un cercle avec un centre creux: utilisation border-radius, donner à l'élément une bordure et sans arrière-plan afin que vous puissiez voir à travers:

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

À ma connaissance, il n'y a aucun moyen cross-browser compatible pour faire un cercle avec CSS et HTML uniquement.

Pour la place, je suppose que vous pourriez faire un div avec une bordure et un z-index plus élevé que ce que vous mettez au-dessus. Je ne comprends pas pourquoi vous auriez besoin de faire cela, quand vous pouvez simplement mettre une frontière sur l'image ou lui-même « quelque chose ».

Si quelqu'un d'autre sait comment faire un cercle qui est navigateur compatible avec CSS cross et HTML seulement, j'aimerais entendre parler!

@Caspar Kleijne border-radius ne fonctionne pas dans IE8 ou au-dessous, pas sûr 9.

Answer 7

Peu de temps après avoir trouvé cette questions que je trouve ces exemples Tricks CSS: http: //-tours css .com / examples / ShapesOfCSS /

Copié de sorte que vous ne pas cliquer sur

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

Il y a beaucoup d'autres exemples de forme dans le lien ci-dessus, mais vous devez tester la compatibilité du navigateur.