CSS ile Üçgen Ok Yapmak

Ocak 2019
YouTube'ta Takip Et:

CSS ile ok yapmak için imaj kullanmanız gerekmiyor. CSS kodları ile de ok oluşturmak mümkün. Bu oku ister bir butonun çevresine yerleştirin, ister butondan bağımsız olarak kullanın.

Bu dersimizde bir buton oluşturarak ok yapmayı göstermeye çalışacağım. Başlangıç için öncelikle bir div oluşturup, div’e class atayalım ve metin yazalım.

Butonu oluşturduktan sonra buton stili üzerinde rengi, boyutu gibi bazı düzenlemeler yapalım.

Sonra da CSS ile üçgen yapmak için gerekli kodları yazalım. Border width ve border color değerleri, üçgenin baktığı açı ve boyutu ile ilgili. Boyutuna ilişkili olarak right ve bottom gibi değerlerini de, okun butona yaslanması için değiştirmeniz gerekir.

Yukarıdaki kodları kullanırsanız ok işareti, butonun altında, aşağı doğru bakar vaziyette yer alacaktır.

Okun bakış yönünü sağa doğru değiştirmek için de aşağıdaki kodları kullanın ve right ile bottom değerlerini butonun genişliğine göre değiştirmeyi unutmayın.

Eğer tüm bu kodlar çok karışık geliyorsa sizin için CSS oklarını otomatik oluşturan bazı siteler var. Bunlardan biri CSS Triangle Generator. İstediğiniz boyut ve renk bilgileri ile ok yönünü belirlediğinizde üçgen oluşturmak için gerekli kodları size hemen çıkarıyor.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.