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

  • gadgetgal38

    gadgetgal38

    9 HAZİRAN 2009
  • kev5124

    kev5124

    9 Kasım 2008
  • theKGB65

    theKGB65

    24 Aralık 2007