CSS İle Ok (Üçgen Şekli) Yapmak - Sinan Yorulmaz

Sinan Yorulmaz


Bir Yazılımcının Günlüğü

01 Ocak 2016
CSS İle Ok (Üçgen Şekli) Yapmak

CSS3
1 Ocak 2016 CSS/CSS3 629 Okuma Yorum Yok

Yaptığım bir proje gereği ufak bir ok işaretine, diğer bir tabir ile bir üçgene ihtiyaç duydum. Genelde bu tür şeyleri ikonlarla hallederdim ama bu projemde, tasarımın oldukça hafif olması gerektiğinden bunu CSS ile halletmek istedim. Şimdi sizlere CSS ile ok yani üçgen şeklini nasıl yapabileceğinizi göstereceğim ve eminim “Çok kolaymış!” diyeceksiniz.

Öncelikle bir DIV oluşturuyoruz.

Bu DIV’e istediğiniz ismi verebilirsiniz, ben “saga-ok” dedim. Sonrasında CSS kodlarımızı yazıyoruz.

İşte hepsi bu kadar! “border-left“, “border-top” ve “border-bottom” değerleri ile oynayarak şeklinizin boyutunu ayarlayabilirsiniz. Ayrıca “#000000” değerini değiştirerek de rengini değiştirebilirsiniz.

İşte size çalışan bir örnek:

See the Pen dGNyRe by Sinan (@sinanyorulmaz) on CodePen.

Yorum Yap

Copyright © 2015. Tüm haklarım anneme aittir. Babama yakalanmadığınız sürece sorun yok!