Circle div oluşturmanın bir resim kullanmaktan daha kolay bir yolu var mı?

Dairesel div oluşturmanın şimdi yaptığımdan daha kolay bir yolu olup olmadığını merak ediyorum.

Şu anda, her farklı boyut için bir resim yapıyorum, ancak bunu yapmak can sıkıcı.

Dairesel olan div yapmak için CSS kullanarak yine de var mı ve yarıçapı belirtebilir miyim?

İşte bir 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>

Bu IE8 ve daha eski sürümlerde çalışması için , CSS3 PIE'yi indirmeli ve kullanmalısınız . Yukarıdaki demomuz IE8'de çalışmaz, ancak bunun nedeni yalnızca jsFiddle'ın barındırmamasıdır PIE.htc.

Demom şöyle görünüyor:

Bir öğenin her bir kenarının kenar yarıçapını% 50 olarak ayarlamak, herhangi bir boyutta daire görüntüsünü oluşturur:

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

Bunu dene

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

Aslında mümkün.

Bakınız: CSS İpucu: Resimler Olmadan Çevreler Oluşturma . Demoya bakınız .

Ancak uyarılmalıdır, Temel olarak uyumluluk açısından ciddi dezavantajları vardır, bir kedi kabuğu yapıyorsunuz.

Burada çalıştığını görün

Size sadece yukarı setine sahip göreceğimiz gibi heightve widthyarımborder-radius

İyi şanslar!

Ayrıca, bir daire oluşturmak için birkaç (20+) yatay veya dikey 1 piksel div kullanmanın [kötü fikri] vardır. Bu jQuery eklentisi , farklı şekiller oluşturmak için bu yöntemi kullanır.

Boyuta bağlı olarak genişlik ve yükseklik verin, ancak her ikisini de eşit tutun

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

Sadece "Bir görüntü kullanmaktan daha kolay div div oluşturmak için daha kolay bir yol?" hangi FontAwesome kullanmaktır.

Fontawesome css dosyasını veya CDN'den buraya aktarıyorsunuz

ve sonra sadece:

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

ve herhangi bir yazı tipi boyutu istediğiniz herhangi bir renk verebilirsiniz.

radial-gradientCSS işlevini deneyebilirsiniz :

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

Bir divkatmana uygulayın :

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

Diyelim ki bu resme sahipsin:

bundan bir daire oluşturmak için sadece eklemeniz gerekir

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

Eğer bir div'iniz varsa aynı şeyi yapabilirsiniz.

Aşağıdaki örneği kontrol edin:

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

Yarıçap kullanabilirsiniz, ancak IE: üzerinde çalışmaz border-radius: 5px 5px;.

temelde bu, verilen koordinatlara bir karakter yerleştirmek için div'ın mutlak konumunu kullanır. bir daire için parametrik denklemi kullanarak bir daire çizebilirsiniz. div'ın konumunu göreceli olarak değiştirirseniz, sinüs dalgasına neden olur ...

özünde, position özelliğini kötüye kullanarak denklemleri grafiklendiriyoruz. Ben css iyi usta değilim, böylece birisi kesinlikle bu daha zarif yapabilirsiniz. zevk almak.

Bu, tüm tarayıcılarda ve mobil cihazlarda (farkında olduğum) çalışır. i kendi web sitesinde metin sinüs dalgaları (www.cpixel.com) çizmek için kullanın. bu kodun orijinal kaynağı burada bulunur: 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>

Şu cssmülk ekleniyor :

border-radius: 50%;

herhangi bir div için dairesel yapar.

Daire için bir div öğesi oluşturun ve sonra width = kenarlık yarıçapının 2 katı = 2 defa dolgu girin. Ayrıca satır yüksekliği = 0 Örneğin, dairenin yarıçapı olarak 50 piksel olduğunda, aşağıdaki kod iyi çalışır:

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