CSS ile Üçgen Nasıl Oluşturulur? Border ve Clip-Path Yöntemleri

Modern web tasarımında ikonlar, ok işaretleri ve tooltip (bilgilendirme balonu) yönlendiricileri için sıklıkla üçgen şekillerine ihtiyaç duyulur. Görsel dosyaları (PNG/SVG) kullanmak yerine saf CSS ile üçgen oluşturmak, sayfa yükleme hızını artırır ve renk/boyut değişikliklerini kolaylaştırır.

Border (Kenarlık) Yöntemi ile Üçgen Yapımı

CSS'te üçgen oluşturmanın en geleneksel yolu border özelliğini kullanmaktır. Genişliği ve yüksekliği 0px olan bir HTML elemanının kenarlıklarına renk verildiğinde kenarlıklar birbiriyle dik açılı kesişir. Saydam (transparent) kenarlıklar sayesinde istenen yöne bakan üçgenler elde edilir.

Örneğin, yukarı bakan bir üçgen için alt kenarlığa renk verilirken sol ve sağ kenarlıklar saydam yapılır:

.triangle-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 15px solid #3b82f6;
}

Bu yöntemde dikkat edilmesi gereken nokta, üçgen tabanının iki katı saydam kenarlık gerektirmesidir.

Clip-Path Yöntemi ile Üçgen Yapımı

Modern CSS ile gelen clip-path özelliği, elemanları geometrik şekillere göre kesmeye olanak tanır. Polygon (çokgen) fonksiyonu kullanarak üçgen oluşturmak daha esnek ve anlaşılırdır:

.triangle-clip {
  width: 40px;
  height: 40px;
  background-color: #10b981;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Clip-path yöntemi responsive tasarımlarda yüzde bazlı boyutlandırma imkanı sunar ve kırpılan alan dışındaki tıklamaları engeller.

Hangisi Tercih Edilmeli?

• Border Yöntemi: Eski tarayıcılarla %100 uyumluluk gerektiren ve sabit piksel boyutlu tooltip uçlarında mükemmeldir.
• Clip-Path Yöntemi: Akıcı (fluid) boyutlandırma, degrade (gradient) renk dolgusu veya animasyonlu şekil dönüşümleri gerektiğinde idealdir.

İhtiyacınıza uygun CSS kodlarını hızlıca üretmek için CSS Üçgen Oluşturucu aracımızı kullanabilir, boyut ve yön ayarlarını görsel olarak yapılandırıp kopyalayabilirsiniz.