Einfachere Möglichkeit, Kreisdiv zu erstellen, als ein Bild zu verwenden?

Ich frage mich, ob es einen einfacheren Weg gibt, kreisförmige Divs zu erstellen, als das, was ich jetzt mache.

Momentan mache ich nur ein Bild für jede Größe, aber es ist ärgerlich, dies zu tun.

Gibt es überhaupt CSS, um kreisförmige Divs zu erstellen, und ich kann den Radius angeben?

Hier ist eine Demo: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Damit dies in IE8 und älter funktioniert , müssen Sie CSS3 PIE herunterladen und verwenden . Meine obige Demo funktioniert nicht in IE8, aber das liegt nur daran, dass jsFiddle nicht hostet PIE.htc.

Meine Demo sieht so aus:

Wenn Sie den Rahmenradius jeder Seite eines Elements auf 50% einstellen, wird die Kreisanzeige in einer beliebigen Größe erstellt:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

Versuche dies

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

Es ist tatsächlich möglich.

Siehe: CSS-Tipp: So erstellen Sie Kreise ohne Bilder . Siehe Demo .

Aber seien Sie gewarnt, es hat schwerwiegende Nachteile in Bezug auf die Kompatibilität im Grunde, Sie machen eine Katze bellen.

Sehen Sie, wie es hier funktioniert

Wie Sie sehen werden, müssen Sie nur die heightund widthdie Hälfte der einrichtenborder-radius

Viel Glück!

Es gibt auch die schlechte Idee, mehrere (20+) horizontale oder vertikale 1px-Divs zu verwenden, um einen Kreis zu konstruieren. Dieses jQuery-Plugin verwendet diese Methode, um verschiedene Formen zu erstellen.

Geben Sie je nach Größe Breite und Höhe an, aber halten Sie beide gleich

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}

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

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

Ich wollte nur eine andere Lösung erwähnen, die die Frage beantwortet: "Einfachere Möglichkeit, Kreis-Div zu erstellen, als ein Bild zu verwenden?" welches FontAwesome verwenden soll.

Sie importieren die fontawesome CSS-Datei oder aus dem CDN hier

und dann bist du einfach:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

und Sie können ihm jede gewünschte Farbe und Schriftgröße geben.

Sie können die radial-gradientCSS-Funktion ausprobieren :

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Wende es auf eine divEbene an:

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

Angenommen, Sie haben dieses Bild:

Um daraus einen Kreis zu machen, müssen Sie nur hinzufügen

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

Wenn Sie also einen Div haben, können Sie das Gleiche tun.

Überprüfen Sie das folgende Beispiel:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>

Sie können Radius verwenden, aber es funktioniert nicht im IE : border-radius: 5px 5px;.

Grundsätzlich wird die absolute Position von div verwendet, um ein Zeichen an den angegebenen Koordinaten zu platzieren. Mit der parametrischen Gleichung für einen Kreis können Sie also einen Kreis zeichnen. Wenn Sie die Position von div in relativ ändern, führt dies zu einer Sinuswelle ...

Im Wesentlichen zeichnen wir Gleichungen, indem wir die Positionseigenschaft missbrauchen. Ich bin nicht gut mit CSS vertraut, also kann jemand dies sicherlich eleganter machen. genießen.

Dies funktioniert auf allen Browsern und Mobilgeräten (die mir bekannt sind). Ich benutze es auf meiner eigenen Website, um Sinuswellen von Text zu zeichnen (www.cpixel.com). Die ursprüngliche Quelle dieses Codes finden Sie hier: www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

Hinzufügen der cssEigenschaft von:

border-radius: 50%;

zu jedem div macht es kreisförmig.

Erstellen Sie für einen Kreis ein div-Element und geben Sie dann width = 2 mal des Randradius = 2 mal padding ein. Auch Zeilenhöhe = 0 Mit beispielsweise 50 Pixel als Radien des Kreises funktioniert der folgende Code gut:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;