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

  • ChannelRichard

    ChannelRicha

    7 Kasım 2008
  • Majestic Casual

    Majestic Cas

    28 NİSAN 2012
  • ODN

    ODN

    26 Kasım 2006