CSS Yön Okları Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Yön Okları Yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(6003)
RAPOR ET
CSS de nasıl yön okları yaparız onu anlatacam.Eskiden olsa resim dosyası olarak çağırılır kullanılırdı.Ama artık cssle yapıyoz.Önce mantığını anlatayım.
http://ustaderslik.com/resim/ders/ry0yd.png

Objemizin boyutu 0x0 olacak daha sonra objemizin yönü yani uç kısmı olacak kısma border vermiyoruz.
ucun tam karşısına bir boyut veriyoruz.Diğer kısımlara bu verdiğimiz boyutun yarısı kadar border veriyoruz ve transparan ediyoruz.Bu şekilde üçgeni elde ediyoruz.Şimdi örneklere bakalım.

1-Sağ Ok
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.ok{width:0;height:0;border-left:300px solid #5c87d1;border-top:150px solid transparent;border-bottom:150px solid transparent;}
</style>
</head>
<body>

<div class="ok"></div>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/ry1j7.png

2-Sol Ok
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.ok{width:0;height:0;border-right:300px solid #5c87d1;border-top:150px solid transparent;border-bottom:150px solid transparent;}
</style>
</head>
<body>

<div class="ok"></div>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/ry1l5.png

3-Aşağı Ok
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.ok{width:0;height:0;border-top:300px solid #5c87d1;border-left:150px solid transparent;border-right:150px solid transparent;}
</style>
</head>
<body>

<div class="ok"></div>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/ry1mu.png

4-Yukarı Ok
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.ok{width:0;height:0;border-bottom:300px solid #5c87d1;border-left:150px solid transparent;border-right:150px solid transparent;}
</style>
</head>
<body>

<div class="ok"></div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/ry1pp.png

Css ile oklar bu şekilde oluşturuyoruz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol