Kültürlü PenguenSeo Blog'u
Hala tatil yapanlar var. Sömürdünüz güneşi. Güneş sistemi size çalıştı hep


CSS İle Üçgen Yapımı

112 Okunma


CSS ile üçgen yapımı açılır menülerde, açılan menünün ebeveynini göstermede oldukça kullanışlı bir yöntemdir. Bu yöntemle bir üçgen ekleyerek, açılmış menünün hangi elementten açıldığı gösterilir. Resimlerle yapılan bu yöntem aynı zamanda CSS ile de yapılabilir. Bunları birer span veya div elementiyle yapabiliriz

<div class="yukari"></div>
<div class="asagi"></div>
<div class="sol"></div>
<div class="sag"></div>

Asıl mantık, olmayan bir kutu oluşturarak etrafına kenarlık eklemek ve bunlardan görünmesini istediğimiz renkte ve ayarlamak istediğimiz yöne göre kenarlığın yönünü belirliyoruz. Yani yukarıya görünmesini istiyorsanız yukarıya kenarlık belirlememeniz, aşağıya eklemek istiyorsanız da aşağıya belirlememeniz ve yukarıya belirlemeniz gerekiyor.

.yukari {
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:12px solid #09F;
  width:0;
  height:0;
}

.asagi {
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:12px solid #0B0;
  width:0;
  height:0;
}

.sol {
  border-right:12px solid #B00;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  width:0;
  height:0;
}

.sag {
  border-left:12px solid #F60;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  width:0;
  height:0;
}

Yapılan üçgenlerin büyüklükleri her border tanımlamasındaki pixel değerleri değiştirilerek ayarlanabilir.


avatarresmi

Ulan şu zenginler gibi kafamız bozulduğunda son model arabamızı alıp deniz kenarında efkarlanamadık be varsa yoksa kapıyı çarp yatağa atla

- Twitter - Facebook


Cevap Yaz

Görüşlerinizi bizimle paylaşmanız bizi çok mutlu edecektir. Bir yorum da siz bırakın.
Blogların beslenme şekli yorumlardır.