Kategoriler
CSS

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

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.

[html]<div class=”saga-ok”></div>[/html]

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

[css].saga-ok{
width:0;
height:0;
border-left:100px solid #000000;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}[/css]

İş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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.