CSS ile Menü Kenarına Ok Yapmak

Projelerimden biriyle uğraşırken canım sıkıldı ve CSS’te “before” ve “after” özelliklerinden bahsetmek istedim. Yorumlara siz de bu özellik ile yapılabilecek başka içerikler önerebilirsiniz.

En basit tabirle “before” bir elemanın içine ilk sıraya HTML elemanı dışında bir eleman daha eklemenize olanak tanır. Bu ister metin olabilir, isterseniz de benim bahsedeceğim gibi çeşitli şekiller.

Söylemeye gerek var mı bilmiyorum ama “after” da tam tersi olarak son sıraya eleman ekler 😀

Ok yapmanın temel mantığı transparan bir kareye tek taraflı “border” vermektir. Bu okun tam hizalanması için “before” uygulanacak elemana position: relative özelliği verilmelidir. Daha sonra “before” elemanı position: absolute ile konumlandırılabilir.

Daha fazla karmaşık bir şey olmadığı için kodu buradan yazmak yerine “jsfiddle”da paylaşıyorum. Kafasına bir şey takılan olursa yorum yazabilir.

Berkay Davas tarafından

15 Haziran 1999’da İstanbul’da doğdum. İlk ve orta öğrenimimi İstanbul’da tamamladım ardından 2017 yılında Çapa Anadolu Öğretmen Lisesinden mezun oldum. Lise yıllarında başladığım web tasarım ve programlama işini 6 senedir profesyonel olarak sürdürmekteyim. Halihazırda Beykent Üniversitesinde Bilgisayar Mühendisliği eğitimi almaktayım.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.