web-dev-qa-db-fra.com

Comment créer un cercle ou un carré uniquement avec CSS - avec un centre creux?

En gros, il devrait s'agir d'un contour du carré ou du cercle - que je peux styliser en conséquence (c'est-à-dire changer la couleur comme bon me semble, changer l'épaisseur de la bordure, etc.)

Je voudrais appliquer ce cercle ou ce carré à autre chose (comme une image ou quelque chose) et la partie centrale doit être évidée afin que vous puissiez voir l'image sous le carré ou le cercle.

Je préférerais qu'il s'agisse principalement de CSS + HTML.

htmlcssgeometrycss-shapes
39
marcamillion

Essaye ça

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 ici

51
Caspar Kleijne

Vous pouvez utiliser des caractères spéciaux pour créer 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>

enter image description here

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

16
Martlark

je ne connais pas de solution simple css (2.1 standard), mais uniquement pour les cercles, mais vous pouvez faire facilement des carrés:

.squared {
    border: 2x solid black;
}

ensuite, utilisez le code HTML suivant:

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

Si vous souhaitez que votre div conserve sa forme circulaire même si vous modifiez sa largeur/hauteur (en utilisant js par exemple), définissez le rayon sur 50%. Exemple: css:

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

html:

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

Heure du cercle! :) Un moyen facile de faire un cercle avec un centre creux: utilisez border-radius, donnez à l'élément une bordure et pas de fond pour 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>
5
coven

À ma connaissance, il n'existe pas de moyen compatible entre les navigateurs pour créer un cercle uniquement avec CSS et HTML.

Pour le carré, je pense que vous pourriez faire une div avec une bordure et un z-index plus haut que ce que vous lui donnez. Je ne comprends pas pourquoi vous auriez besoin de faire cela, alors que vous pourriez simplement mettre une bordure sur l'image ou "quelque chose" lui-même.

Si quelqu'un d'autre sait comment créer un cercle compatible avec les styles CSS et HTML uniquement entre navigateurs, j'aimerais en entendre parler!

@Caspar Kleijne border-radius ne fonctionne pas dans IE8 ou une version antérieure, pas sûr de 9.

3
Ammi J Embry

Peu de temps après avoir trouvé ces questions, j'ai trouvé ces exemples sur les astuces CSS: http://css-tricks.com/examples/ShapesOfCSS/

Copié pour que vous n'ayez pas à cliquer

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

Le lien ci-dessus contient de nombreux autres exemples de formes, mais vous devrez vérifier la compatibilité du navigateur.

1
CatShoes