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.