CSS ile Üçgen Ok Yapmak

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.

<div class="button">Buton</div>

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

.button {
  background-color:#18569c;
  float:left;
  padding:10px 20px;
  border-radius:4px;
  font-size:20px;
  position:relative;
  color: white;
}

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.

.button:after {
	content: '';
	position:absolute;
	right: 10px;
	bottom:-10px;
	border-style: solid;
	border-width: 14px 14px 0 14px;
	border-color: #18569c transparent transparent transparent;
}

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

Css Ok Nasil Yapilir

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.

border-width: 7px 0 7px 14px;
border-color: transparent transparent transparent #18569c;

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.

Popular Eğitimler

Mouse Hover ile Büyüyen Resim Efekti (CSS)

HTML ve CSS kullanarak, görsellerin üzerine geldiğimizde animasyonlu / hareketli bir şekilde…

Ücretsiz Cloudflare CDN Kurulumu, Kullanımı ve Ayarları

Cloudflare, ücretsiz CDN hizmeti veren bir firma ve web sitelerimizin performansını artırmayı…

CSS Nedir ve Nasıl Kullanılır?

CSS, HTML ile kodladığımız sayfaları görsel olarak güzelleştirmemizi sağlar. CSS, evin dekoru…

Hareketli Alt Çizgi Efekti (HTML ve CSS)

HTML ve CSS ile menüde, linklerde ya da diğer metinlerde kullanmak için,…

jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze…

CSS3 Border Radius ile Yuvarlak (Oval) Köşeler

CSS ile yuvarlak köşeli div nasıl oluşturulur? Resmin köşeleri CSS ile nasıl yuvarlak veya oval yapılır? Bir resmin tamamı nasıl yuvarlak yapılır?