CSS ile Üçgen Çizmek

Gün geçtikçe CSS önem kazanmaktadır. Çünkü web sayfalarında kullanılan grafikler sitenin geç açılması ve de yoğun trafik kullanımına neden olmaktadır. CSS'in bazı nimetlerinden birisi de grafik ile yapılabilecek bazı nesne, çizimleri vs.. yapılabilmesidir. Küçük bir örneklendirme yapacağız ve CSS ile üçgen çizimini anlatacağız.

---

Aşama 1): 200x200 boyutlarında kare oluşturup; üst, alt ve sol kenarlara 1px değerinde border verelim.
Aşama 1 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid #000;
}

Aşama 1 (Örnek)

---

Aşama 2): Oluşan şeklin üst kenarlık değerini arttıralım (üst kenarlık 50px değerine sahip olsun).
Aşama 2 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:50px solid red;
border-bottom:1px solid red;
border-left:1px solid #000;
}

Aşama 2 (Örnek)

---

Aşama 3): Oluşan şeklin alt kenarlık değerini arttıralım (alt kenarlık 50px değerine sahip olsun).
Aşama 3 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:50px solid red;
border-bottom:50px solid red;
border-left:1px solid #000;
}

Aşama 3 (Örnek)

---

Aşama 4): Oluşan şeklin sol kenarlık değerini arttıralım (sol kenarlık 50px değerine sahip olsun).
Aşama 4 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:50px solid red;
border-bottom:50px solid red;
border-left:50px solid #000;
}

Aşama 4 (Örnek)

---

Aşama 5): Oluşan şeklin sol kenarlık değerini biraz daha arttıralım (sol kenarlık 100px değerine sahip olsun).
Aşama 5 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:50px solid red;
border-bottom:50px solid red;
border-left:100px solid #000;
}

Aşama 5 (Örnek)

---

Aşama 6): Oluşan şeklin sol kenarlık değerini biraz daha arttıralım (sol kenarlık 150px değerine sahip olsun).
Aşama 6 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:50px solid red;
border-bottom:50px solid red;
border-left:150px solid #000;
}

Aşama 6 (Örnek)

---

Aşama 7): Oluşan şeklin sol kenarlık değerini biraz daha arttıralım (sol kenarlık 200px değerine sahip olsun, 200px değeri ise şeklin bir kenar uzunluğuna eşittir.).
Aşama 7 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:50px solid red;
border-bottom:50px solid red;
border-left:200px solid #000;
}

Aşama 7 (Örnek)

---

Aşama 8): Oluşan şeklin üst ve alt kenarlık değerlerini biraz daha arttıralım (ikisi de 100px değerine sahip olsun).
Aşama 8 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:100px solid red;
border-bottom:100px solid red;
border-left:200px solid #000;
}

Aşama 8 (Örnek)

---

Aşama 9): Şimdi ise bu şeklin üst ve alt kenarlık arkaplanını transparan yapalım ve böylece sadece sol kenarlık görünür olacaktır.
Aşama 9 (CSS)

.ucgen{
width:200px;
height:200px;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
border-left:200px solid #000;
}

Aşama 9 (Örnek)