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

  • BuzzFeedVideo

    BuzzFeedVide

    10 AĞUSTOS 2011
  • incognitotraveler

    incognitotra

    27 Mayıs 2010
  • Munchkin the Teddy Bear

    Munchkin the

    30 EYLÜL 2011