Css İle Üçgen Yapımı

Css dahilinde bulunan "border" (sınır, kenar) özelliği ile üçgen ve üçgen içerikli şekiller nasıl oluşturulur?

Css internet siteleri oluşturulurken öğrenmesi kolay ustalaşması uzun süre olan kategorisinde en çok akla gelen dillerdendir. Aslında kendisi bir dil değil isminden de anlaşılabileceği üzere kademeli olarak stil belirlemeye yarayan bir sayfadır. Başlangıçta değil ama ilerledikçe ve problem çözme ihtiyacı arttıkça kullanabileceğiniz de bir çok özelliği barındırmaktadır. Bu bağlamda işe yarama ihtimali düşük de olsa css border özelliğinin nasıl çalıştığına dair çok iyi bir fikir vermek amacıyla border ile üçgen yapma fikri ilginizi çekebilir.

CSS border özelliği herhangi bir alanın dört yanını belirli bir renk ve boyutta sarmanızı sağlar. Ancak bu kenar öğelerinin kesişim yerleri 45 derecelik açılarla belirlenmiştir. Bir öğeye sadece alt ve üst border özelliğini verdiğinizde bunu anlayamazsınız, zira herhangi bir border (sınır) kesişmesi olmayacağından border ın bittiği noktalar 90 derecedir ve kaplanan içerik ile aynıdır. Örnek olarak:

Aşağıdaki öğenin stilleri:

• width:200px; //genişlik
• height:50px; //yükselik
• border-top:5px solid red; //üst sınır 
• border-bottom:5px solid red; //alt sınır
• background:white; //arka fon

Bu öğeye sağ ve sol border verirsek:

• border-left:5px solid green; //sol sınır
• border-right:5px solid green; //sağ sınır

Görüldüğü üzere sınırlar kesişti ve kesişme noktalarındaki açı 45. Bu olayı üçgen oluşturmak amacıyla kullanmak için border lar ile oynamak ve genişlik ve yüksekliği sıfırlamak yeterli.

Stiller:

• border-color: yellow blue red green;
• border-style: solid; // sınır stili
• border-width: 100px 100px 100px 100px;
• height: 0px;
• width: 0px;

Sade bir üçgen istiyorsanız da şunu yapabilirsiniz:

• border-color: transparent transparent red transparent;
• border-style: solid;
• border-width: 0px 100px 100px 100px;
• height: 0px;
• width: 0px;

Örneklerini çoğaltarak belki belli durumlarda işe yarar bir hale getirebilirsiniz.