Łatwiejszy sposób na utworzenie div div niż użycie obrazu?

Zastanawiam się, czy jest łatwiejszy sposób tworzenia okrągłych div niż niż to, co robię teraz.

Obecnie tworzę tylko obraz dla każdego rozmiaru, ale irytuje to.

Czy w ogóle używa CSS do tworzenia div, które są okrągłe i mogę określić promień?

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

Aby ta funkcja działała w IE8 i starszych wersjach , musisz pobrać i używać CSS3 PIE . Moje powyższe demo nie będzie działać w IE8, ale to tylko dlatego, że jsFiddle nie hostuje PIE.htc.

Moje demo wygląda następująco:

Ustawienie promienia granicznego każdej strony elementu na 50% spowoduje utworzenie widoku okręgu w dowolnym rozmiarze:

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

Spróbuj tego

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

To jest faktycznie możliwe.

Zobacz: Wskazówka CSS: Jak tworzyć koła bez obrazów . Zobacz demo .

Ale uwaga, ma poważne wady pod względem kompatybilności, w zasadzie robisz szczekanie kota.

Zobacz, jak działa tutaj

Jak zobaczysz, wystarczy skonfigurować heighti widthdo połowyborder-radius

Powodzenia!

Jest też [zły pomysł] używania kilku (20+) poziomych lub pionowych div 1px do zbudowania koła. Ta wtyczka jQuery używa tej metody do konstruowania różnych kształtów.

Podaj szerokość i wysokość w zależności od rozmiaru, ale zachowaj oba wartości na tym samym poziomie

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

Chciałem tylko wspomnieć o innym rozwiązaniu, które odpowiada na pytanie „Łatwiejszy sposób tworzenia div div niż używanie obrazu?” który ma używać FontAwesome.

Możesz zaimportować plik css fontawesome lub z CDN tutaj

a następnie po prostu:

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

i możesz nadać mu dowolny kolor, dowolny rozmiar czcionki.

Możesz wypróbować funkcję radial-gradientCSS:

.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+ */
}

Zastosuj to do divwarstwy:

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

Powiedzmy, że masz ten obraz:

aby zrobić z tego krąg, wystarczy dodać

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

Więc jeśli masz div, możesz zrobić to samo.

Sprawdź poniższy przykład:

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

Można użyć promień, ale to nie będzie działać na IE: border-radius: 5px 5px;.

w zasadzie używa absolutnej pozycji div do umieszczenia znaku na podanych współrzędnych. więc używając równania parametrycznego dla koła, możesz narysować okrąg. jeśli zmienisz pozycję div na względną, spowoduje to sinusoidę ...

w istocie grafujemy równania poprzez nadużywanie właściwości position. Nie znam się dobrze na css, więc ktoś może z pewnością uczynić to bardziej eleganckim. cieszyć się.

działa to na wszystkich przeglądarkach i urządzeniach mobilnych (o których wiem). Używam go na mojej stronie internetowej do rysowania fal sinusoidalnych tekstu (www.cpixel.com). oryginalne źródło tego kodu znajduje się tutaj: 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>

Dodanie csswłaściwości:

border-radius: 50%;

do dowolnego div czyni go okrągłym.

W przypadku okręgu utwórz element div, a następnie wprowadź szerokość = 2 razy promień granicy = 2 razy wypełnienie. Również wysokość linii = 0 Na przykład, przy 50px jako promienie okręgu, poniższy kod działa dobrze:

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