Wie kann ich einen Kreis oder ein Quadrat mit nur CSS erstellen - mit einem hohlen Zentrum?

Question

Es sollte im Grunde nur eine Übersicht des Quadrats oder Kreises -, dass ich entsprechend stylen kann (d. H die Farbe ändern, was auch immer ich will, verändert die Dicke der Grenze usw.)

Ich mag, dass Kreis oder ein Quadrat über etwas anderes gelten (wie ein Bild oder etwas) und den Mittelteil ausgehöhlt werden soll, so dass Sie das Bild unter dem Quadrat oder Kreis sehen.

Ich würde es vorziehen, für sie in erster Linie seines CSS + HTML.

Answer 1

Versuchen Sie, diese

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

Answer 2

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

Answer 3

ich weiß nicht, von einem einfachen CSS (Standard 2.1) -nur Lösung für Kreise, aber für Quadrate können Sie tun einfach:

.squared {
    border: 2x solid black;
}

dann verwenden Sie den folgenden HTML-Code:

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

Answer 4

Wenn Sie Ihre div es die Kreisform zu halten, auch wenn Sie die Breite / Höhe ändern stellen Sie den Radius auf 50% (js zum Beispiel verwendet wird). Beispiel: CSS:

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

html:

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

Answer 5

Kreis-Zeit! :) Einfache Möglichkeit, einen Kreis mit einem hohlen Zentrum machen: Verwendung border-radius, gibt dem Elemente eine Grenze und keinen Hintergrund, so dass Sie durch sie sehen 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>

Answer 6

Mein Wissen gibt es keine Cross-Browser-kompatible Art und Weise nur einen Kreis mit CSS & HTML zu machen.

Für den Platz denke ich Ihnen ein div mit einer Grenze machen könnten und ein Z-Index höher als das, was Sie es über setzen. Ich verstehe nicht, warum Sie müssen dies tun, wenn Sie nur einen Rahmen auf dem Bild setzen könnten oder „etwas“ selbst.

Wenn jemand weiß, wie man einen Kreis zu machen, die Cross-Browser mit CSS & HTML nur kompatibel ist, würde ich gerne davon hören!

@Caspar Kleijne border-radius funktioniert nicht in IE8 oder unten, nicht sicher 9.

Answer 7

Kurz nach diesen Fragen zu finden, fand ich diese Beispiele auf CSS Tricks: http: // CSS-Tricks .com / examples / ShapesOfCSS /

kopiert, so müssen Sie nicht auf

.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 Beispiele Form in den obigen Link, aber Sie werden für Browser-Kompatibilität zu testen.