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.
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ü :
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ü :
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ü :
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ü :
Css ile oklar bu şekilde oluşturuyoruz.
UstaDerslik
