Cara yang lebih mudah untuk membuat lingkaran div daripada menggunakan gambar?

Saya bertanya-tanya apakah ada cara yang lebih mudah untuk membuat div lingkaran daripada apa yang saya lakukan sekarang.

Saat ini, saya hanya membuat gambar untuk setiap ukuran yang berbeda, tetapi itu menjengkelkan untuk melakukan ini.

Adakah tetap menggunakan CSS untuk membuat div yang melingkar dan saya dapat menentukan radius?

Berikut ini 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>

Untuk membuatnya bekerja di IE8 dan yang lebih lama , Anda harus mengunduh dan menggunakan PIE CSS3 . Demo saya di atas tidak akan berfungsi di IE8, tapi itu hanya karena jsFiddle tidak host PIE.htc.

Demo saya terlihat seperti ini:

Mengatur batas-jari-jari setiap sisi elemen hingga 50% akan membuat tampilan lingkaran pada ukuran berapa pun:

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

Coba ini

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

Ini sebenarnya mungkin.

Lihat: Tip CSS: Cara Membuat Lingkaran Tanpa Gambar . Lihat demo .

Tetapi berhati-hatilah, pada dasarnya memiliki kelemahan serius dalam hal kompatibilitas, Anda membuat kulit kucing.

Lihat berhasil di sini

Seperti yang akan Anda lihat, Anda hanya perlu mengatur heightdan widthuntuk setengahnyaborder-radius

Semoga berhasil!

Ada juga [ide buruk] menggunakan beberapa (20+) horisontal atau vertikal 1px divs untuk membuat lingkaran. Plugin jQuery ini menggunakan metode ini untuk membuat bentuk yang berbeda.

Berikan lebar dan tinggi tergantung pada ukurannya tetapi, jaga keduanya tetap sama

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

Hanya ingin menyebutkan solusi lain yang menjawab pertanyaan "Cara lebih mudah untuk membuat lingkaran div daripada menggunakan gambar?" yaitu menggunakan FontAwesome.

Anda mengimpor file css fontawesome atau dari CDN di sini

dan kemudian Anda hanya:

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

dan Anda dapat memberikan warna apa saja yang Anda inginkan ukuran font apa pun.

Anda dapat mencoba radial-gradientfungsi CSS:

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

Terapkan ke divlayer:

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

Katakanlah Anda memiliki gambar ini:

untuk membuat lingkaran dari ini, Anda hanya perlu menambahkan

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

Jadi, jika Anda memiliki div Anda dapat melakukan hal yang sama.

Lihat contoh di bawah ini:

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

Anda dapat menggunakan jari-jari tetapi tidak akan bekerja pada IE: border-radius: 5px 5px;.

pada dasarnya ini menggunakan posisi div absolut untuk menempatkan karakter pada koordinat yang diberikan. jadi dengan menggunakan persamaan parametrik untuk lingkaran, Anda bisa menggambar lingkaran. jika Anda mengubah posisi div menjadi relatif, itu akan menghasilkan gelombang sinus ...

intinya kita membuat persamaan dengan menyalahgunakan properti posisi. Saya tidak berpengalaman dalam css, jadi seseorang pasti bisa membuat ini lebih elegan. Nikmati.

ini berfungsi pada semua browser dan perangkat seluler (yang saya ketahui). saya menggunakannya di situs web saya sendiri untuk menggambar gelombang teks sinus (www.cpixel.com). sumber asli kode ini dapat ditemukan di sini: 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>

Menambahkan cssproperti dari:

border-radius: 50%;

untuk setiap div membuatnya melingkar.

Untuk lingkaran, buat elemen div dan kemudian masukkan lebar = 2 kali dari jari-jari batas = 2 kali padding. Juga garis-tinggi = 0 Misalnya, dengan 50px sebagai jari-jari lingkaran, kode di bawah ini berfungsi dengan baik:

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