Wie erstelle ich einen Kreis oder ein Quadrat nur mit CSS – mit einem hohlen Mittelpunkt?

Es sollte im Grunde nur ein Umriss des Quadrats oder Kreises sein – den ich entsprechend gestalten kann (dh die Farbe nach Belieben ändern, die Dicke des Randes ändern usw.).

Ich möchte diesen Kreis oder dieses Quadrat auf etwas anderes anwenden (wie ein Bild oder so) und der mittlere Teil sollte ausgehöhlt werden, sodass Sie das Bild unter dem Quadrat oder Kreis sehen können.

Ich würde es vorziehen, wenn es hauptsächlich CSS + HTML wäre.

Versuche dies

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>

Mehr hier

Sie können Sonderzeichen verwenden, um viele Formen zu erstellen. Beispiele:
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>

Viele weitere finden Sie hier: HTML-Sonderzeichen

Ich kenne keine einfache CSS-Lösung (2.1 Standard) nur für Kreise, aber für Quadrate können Sie Folgendes tun:

.squared {
    border: 2px solid black;
}

Verwenden Sie dann den folgenden HTML-Code:

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

Wenn Sie möchten, dass Ihr div seine kreisförmige Form behält, auch wenn Sie seine Breite/Höhe ändern (z. B. mit js), stellen Sie den Radius auf 50 % ein. Beispiel: CSS:

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

html:

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

Kreiszeit! 🙂 Einfache Möglichkeit, einen Kreis mit einem hohlen Zentrum zu erstellen: Verwenden Sie den Randradius, geben Sie dem Element einen Rand und keinen Hintergrund, damit Sie hindurchsehen können:

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>

Meines Wissens gibt es keine Cross-Browser-kompatible Möglichkeit, einen Kreis nur mit CSS & HTML zu erstellen.

Für das Quadrat könnten Sie ein Div mit einem Rand und einem Z-Index erstellen, der höher ist als der, über den Sie ihn legen. Ich verstehe nicht, warum Sie dies tun müssten, wenn Sie einfach einen Rahmen um das Bild oder “etwas” selbst setzen könnten.

Wenn jemand weiß, wie man einen Kreis erstellt, der nur mit CSS und HTML browserübergreifend kompatibel ist, würde ich gerne davon hören!

@Caspar Kleijne border-radius funktioniert nicht in IE8 oder darunter, bei 9 bin ich mir nicht sicher.

Kurz nachdem ich diese Fragen gefunden hatte, fand ich diese Beispiele auf CSS Tricks: http://css-tricks.com/examples/ShapesOfCSS/

Kopiert, damit Sie nicht klicken müssen

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

Es gibt viele andere Formbeispiele im obigen Link, aber Sie müssen die Browserkompatibilität testen.