CSS İle Üçgen Ok Yapmak

Açılır menü, açılır liste gibi yerlerde kullanılan üçğen ok işaretinin CSS ile yapımını ile ilgili bilgiler yer alıyor.

CSS ile etikete kenarlık verelim.

div {
   border-color: blue orange red green;
   border-style: solid;
   border-width: 50px;
   width: 0px;
   height: 0px;
}

Aşağıdaki gibi bir görüntü ortaya çıkacaktır.

Çıkan görüntüde her kenarın üçgen şeklinde olduğunda dikkat edin.

Belirlediğimiz bir kenar haricindeki kenarlara transparent değeri verdiğimizde sadece belirlediğimiz kenar görünecek diğer kenarlar görünmeyecektir.

div {
   border-color: blue transparent transparent transparent;
   border-style: solid;
   border-width: 50px;
   width: 0px;
   height: 0px;
}

Yukardaki CSS kodunun çıktısı aşağıdaki gibi olacaktır.

Oluşan üçgen tam bir ok görünümünde değil. Tam bir ok görünümünde üçgen oluşturmak için üçgenin karşındaki kenara 0 değerini, üçgenin sağ ve sol tarafındaki değerlere ise kendi değerinin yarısı kadar değer veriyoruz.

div {
   border-color: blue transparent transparent transparent;
   border-style: solid;
   border-width: 50px 25px 0px 25px;
   width: 0px;
   height: 0px;
}

Artık üçgenimiz tam bir ok görünümünde olacaktır.

İşlem bu kadar basit!

Artık yukarı sağa ve sola üçgen ok yapabilirsiniz.

Yukarı üçgen ok

div {
   border-color: transparent transparent blue transparent;
   border-style: solid;
   border-width: 0px 25px 50px 25px;
   width: 0px;
   height: 0px;
}

Sağa üçgen ok

div {
   border-color: transparent blue transparent transparent;
   border-style: solid;
   border-width: 25px 50px 25px 0px;
   width: 0px;
   height: 0px;
}

Sola üçgen ok

div {
   border-color: transparent transparent transparent blue;
   border-style: solid;
   border-width: 25px 0px 25px 50px;
   width: 0px;
   height: 0px;
}

Hatta sağ üst, sol üst vb. köşelere doğru da üçgen ok yapabilirsiniz.

Farklı yönlere üçgen ok oluşturmak için aşağıdaki siteyi kullanabilirsiniz.

– https://cssportal.com/css-triangle-generator/
– https://triangle.designyourcode.io/

Hayırlı günler dilerim.