SORU
30 Ocak 2011, Pazar


Bir resim kullanarak daha yukarı div oluşturmak için kolay yolu?

Şimdi ne yaptığımı daha dairesel divs oluşturmak için daha kolay bir yolu varsa merak ediyorum.

Şu anda, sadece her farklı boyut için resim yapıyorum, ama can sıkıcı bu.

Neyse CSS kullanarak yuvarlak ve yarıçapı belirtin bende divs olun.

CEVAP
30 Ocak 2011, Pazar


Burada 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 iş IE8 and older, sizin için indirmek ve kullanmak gerekir CSS3 PIE. Demomu yukarıda IE8, ama bu sadece jsFiddle PIE.htc ana yaramazsa, çünkü bu işe yaramaz.

Demomu bu gibi görünüyor:

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • stokelycalm

    stokelycalm

    28 Aralık 2010
  • Toddler Fun Learning

    Toddler Fun

    8 ŞUBAT 2013
  • WePlayWeWatch

    WePlayWeWatc

    3 Temmuz 2013