Kategoriler
Kodlama

CSS ile üçgen yapmak

CSS ile farklı üçgen yapma yöntemleri.

  • Volkan Yılmaz
  • Yazı tarihi
Üçgen çizmek{CSS}
Üçgen çizmek{CSS}

Bu yazıda CSS’de üçgen çizmek için farklı yöntemleri göreceksiniz. Hem geleneksel ve basit hem de daha modern yöntemler üzerinde duracağız.

WEb tasarımında bazen bazı şekilleri yapmak durumunda kalabilirsiniz, çok çok eskilerden bu şekiller için görseller kullanabilirdik ama artık sadece CSS ile hiçbir ek materyal gerekmeden neredeyse her şey yapılabilmekte.

CSS ile üçgen çizmek

boder kullanmak:

Bu, CSS’de üçgen çizmenin en basit ve “klasik” yoludur, açık ara en çok kullanılan/popüler olanı. Border şeffaf bırakarak tek renkli kenarlığa sahip olmaktan oluşur. Bunu başarmanın adımları şunlardır:

  1. Bir div’i width ve height 0 olarak ayarlayın.
  2. Kenarlık rengini şeffaf/transparent olarak ayarlayın.
  3. Üst border 0 olarak ayarlayın.
  4. Yan kenarlıkları genişliğin yarısına ayarlayın.
  5. Alt sınırı tam yüksekliğe ayarlayın.
  6. Alt kenarlık için bir renk ayarlayın(örnekte red).

Not: Yukarıdaki adımlar belirli bir üçgen içindir. Gerçek adımlar, çizmek istediğimiz üçgenin türüne bağlı olarak (biraz) değişecektir. Genelde fikir 2-3 bordürü şeffaf, 1-2 bordürü renkli olarak ayarlamak ve ardından bordür boyutlarını ayarlamaktır.

Kolay görünmeyebilir ancak basittir:

Bu yöntem uzun zaman önce ortaya çıktı ve bir “hack“. Bu tüm tarayıcılarda çalışır ve gelecekteki tarayıcıların çalışmaya devam edeceği muhtemel.

Bu yöntemin artıları:

  • Destek: her tarayıcıda çalışır (IE’nin eski sürümleri bile)
  • Basit: Yukarıdaki örnekte gösterildiği gibi programlaması kolaydır.

Bu yöntemin eksileri:

  • Bakımı zor: boyutun değiştirilmesi, kodun değiştirilmesini gerektirir.
  • Katı tasarım: İçerik eklersek, sonuç büyük olasılıkla beklenen olmayacaktır.

background-image kullanmak:

CSS’de iyi çalışan bir satır içi SVG kullanabilirdik … ama CSS yerine bir resim kullanmamak en iyisi. Bunun yerine, background-image gerçek bir görüntü kullanarak ancak üçgeni oluşturalım. Bunu iki doğrusal gradyan ekleyerek başarabiliriz . Üçgenin her bir kenarı için bir tane.

Fikir, bunu yapmak olacaktır:

  1. linear-gradient Sağ alt köşeye doğru a ekleyin (%50’de sert bir değişiklikle şeffaftan kırmızıya)
  2. linear-gradient Sağ üst köşeye doğru bir ekleyin (%50 oranında sert bir değişiklikle kırmızıdan saydamlığa)
  3. Her ikisinin de boyutunu linear-gradient %50 genişliğe ayarlayın
  4. Birini linear-gradient başlangıcına ve diğerini kabın sonuna yerleştirin.

Bu, sınırlardan daha karmaşık görünüyor! Ve yalan söylemeyeceğim, öyle. İşte nasıl göründüğüne dair bir şema:

This is one of many ways to achieve a triangle
This is one of many ways to achieve a triangle

İşte sonuç:

Ancak bazı temel farklılıkları vardır: esas olarak, bu çözüm konteynerin boyutundaki değişikliklere duyarlıdır. Herhangi bir hesaplamaya veya CSS değişkenlerini kullanmaya gerek yoktur. Ayrıca, kap hâlâ bir dikdörtgen olduğundan, metni üçgen şekil içinde biçimlendirme, konumlandırma ve stil verme daha “doğal”dır.

Bu yöntemin artıları:

  • Destek: eski tarayıcılarda (IE10 ve üstü) bile çalışır.
  • Duyarlı: konteynerin boyutuna göre ayarlanır.
  • Metin için mükemmel: Kap şekli etkilenmez, bu nedenle metin veya başka içerik eklemek kolaydır.

Bu yöntemin eksileri:

  • Karmaşık: Bu seçenek muhtemelen geliştirilecek en karmaşık seçenektir.
  • Seçenekler açısından zordur: örneğin, doğrusal bir gradyan olması daha karmaşıktır (ancak uygulanabilir).

clip-path kullanmak:

clip-path üçünün “en yenisi”. Ve Firefox ve Chrome’da (ön ek ile) 10 yıldan fazla bir süredir desteklendiğinden ve desteği ile hemen hemen aynı zamanlarda başladığı için tırnak arasına “en yenisini” ekledim linear-gradient(). clip-path ile elemanın görünen tek parçası olacak bir kırpma bölümü tanımlayabilirsiniz. Bir üçgen çizmek için, yalnızca görüntüdeki gibi üç noktalı bir çokgen tanımlamamız gerekir:

polygon() makes it easy and responsive
polygon() makes it easy and responsive

Bunu başarmak için gereken kod, polygon()işlev sayesinde inanılmaz derecede basittir . Sadece sol alt (% 0% 100), orta-üst (% 50% 0) ve sağ alt (% 100% 100) koordinatlarına ihtiyacımız var ve işimiz bitti!

Hatırlanması gereken önemli bir şey, kırpılan alanın dışındaki her şeyin temelde gitmiş olmasıdır. Ve bu yalnızca içeriği değil, aynı zamanda gölgeler, ana hatlar veya kenarlıklar gibi “dış” öğeleri de içerir. ( Adam Kuhn’un bunun için harika bir çözümü var .) Çokgenler buzdağının yalnızca görünen kısmıdır: daireler, elipsler ve path() temelde hayal edebileceğiniz herhangi bir şekil için en son destekle clip-path.

Bu yöntemin artıları:

  • Kolay: clip-path CSS için oyun değiştiricidir. Güçlü ve çok yönlüdür, sadece üçgenlere değil her şekle izin verir.
  • Duyarlı: konteynerin boyutuna ve değişikliklerine göre ayarlanır.
  • Özelleştirilebilir: gradyanlar ve efektler, görünür alan içinde oldukları sürece sorun değildir.

Bu yöntemin eksileri:

  • Destek: IE’nin hiçbir sürümü clip-path desteklemiyor. Tüm işlevler panoda desteklenmez ( polygon()).
  • “Hataya meyilli”: Kırpılan alanın dışındaki her şey kaybolur ve bu da beklenmedik sonuçlara yol açabilir.

Sonuç

CSS zaman içinde gelişti ve artık kenarlıkları kullanmaktan daha basit, daha esnek ve bakımı daha kolay üçgenler (veya farklı şekiller) oluşturmak için clip-path veya background-image gibi çizim araçları sağlıyor. Daha katı sınırlardan geçmek ve görev için uygun araçları kullanmaya başlamak mantıklıdır. Bir tornavidayla duvara çivi çakmamamız gibi … çekiç kullanırdık!

Yine de, her yöntemin artıları ve eksileri vardır ve birinin diğerlerinden daha iyi olabileceği durumlar vardır. Sınırlar ihtiyacınız olan şey için çalışıyorsa, bunları kullanın. Ancak bu yöntemin zamanla ortadan kalkması doğal olacaktır.

Tablo düzenlerinden yüzen kaplara ve ardından yüzen kaplardan Flexbox ve Grid’e geçtik. Sınırları kullanmaktan işe daha uygun yeni yöntemlere geçmek mantıklı olacaktır.

Kaynaklar: