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


183

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?


1
Peramban apa ini harus didukung?
Thirtydot

Lihatlah jawaban saya untuk pertanyaan terkait ini, khususnya demo: stackoverflow.com/questions/4451350/…
Orbling

1
Anda juga bisa menggunakan SVG (VML) untuk membuat lingkaran.
jasssonpet

2
Mengapa Anda tidak dapat mengubah ukuran lebar dan tinggi gambar Anda alih-alih membuat ukuran yang berbeda? Seberapa besar gambar-gambar ini?
Mottie

Jawaban:


295

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:


Saya tidak dapat membuat div melingkar dalam chrome. Ini berfungsi di Mozilla .. url saya chokate.maninactionscript.com/chokates klik pada gambar gurun atau yang sebelumnya itu div yang ditampilkan pada zooming gambar tidak melingkar..yang ada di mozilla.
techie_28

1
@ techie_28: The divpada halaman Anda adalah bulat, yang dapat Anda lihat jika Anda menambahkan misalnya border: 5px solid reduntuk itu. Masalahnya adalah bahwa bagian-bagian gambar yang "menggantung lingkaran" tidak disembunyikan. Tak satu pun dari solusi yang biasa sangat mudah diterapkan di sini .. Saya sarankan menggunakan -webkit-mask-imageproperti untuk memperbaiki browser WebKit (dan simpan border-radius, untuk browser lain). Info lebih lanjut di sini: webkit.org/blog/181/css-masks . Anda juga dapat mempertimbangkan mengajukan pertanyaan di sini di Stack Overflow, untuk melihat apakah ada orang lain yang memiliki ide lain.
tigapuluh

1
Anda juga bisa melakukan 100%, bukan 999px.
Tony Wickham

1
.htc tidak lagi didukung.
Oliver Dixon

Saya bertanya-tanya bagaimana cara menyelaraskan objek (seperti tombol) di dalam div bulat! : D
Zibri

26

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

1
Ini mungkin metode yang harus digunakan sekarang (pada 2017).
Scribblemacher

13

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

6

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!


Hai, terima kasih atas jsfiddletautan Anda ! Tautan ini adalah satu-satunya yang berfungsi dari jawaban Anda untuk saat ini. ;)
TooroSan

3

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.


3

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>


3
border-radius: 50%;cukup.
MattAllegro

3

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


2

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>

2

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>


1

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


1

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>


0

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>

ini adalah apa yang saya inginkan, tapi apakah ini mungkin untuk menampilkan daftar lingkaran dalam panel menjaga jarak yang tepat antara lingkaran seperti yang ditunjukkan di sini plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview
Jinna Balu


-1

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;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.