Duyarlı kırpma için shape() işlevini kullanma

bookmark_border Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Noam Rosenthal

Yayınlanma tarihi: 8 Nisan 2025

clip-path mülkü, bir öğeyi daire, poligon veya hatta SVG yoluna kırparak şeklini değiştirmenize olanak tanır. Ancak Chrome 135 ve Safari 18.4'ten önce, duyarlı poligonlar ile SVG yolları kullanan duyarlı olmayan daha karmaşık şekiller arasında seçim yapmanız gerekiyordu. Yeni shape() işleviyle clip-path, öğeyi poligon olmayan ve duyarlı bir şekle kırpabilir.

Bayrak şekli oluşturma

Örneğin, clip-path: path() ve clip-path: shape() ile bayrak şekli oluşturmayı karşılaştırın.

Bayrak şekli, üst ve alt kenarları düz çizgiler veya yuvarlatılmış köşeler yerine kübik Bézier eğrileri olduğundan tam olarak bir poligon değildir.

clip-path: path() ile işaret oluşturma

Bu bayrak gibi bir şekil, SVG yolu kullanılarak gösterilebilir:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

SVG yolu, bir dizi yol komutudur:

1. 0, 20'ye gidin.
2. Kontrol noktalarını (25,0 ve 75, 40) kullanarak eğriyi 100, 20'ye getirin.
3. Dikey çizgi 80'e kadar.
4. Kontrol noktalarını (75,100 ve 25,50) kullanarak 0, 80 eğrisi.
5. Yolu kapatın (0,20'ye giden çizgi).

Bu komut, bir bayrak şekli çizer ancak tüm birimler piksel cinsindendir. SVG, bu pikselleri bir görüntü kutusuna ölçeklendirebilir ancak her zaman şeklin tamamının geometrik ölçeği gibi görünecek şekilde ölçeklendirir.

Örneğin, dikdörtgenin tamamının ölçeklenmesini ancak eğrilerin yüksekliğinin ve genişliğinin 20 piksel olarak kalmasını istiyorsanız SVG bu görevi yerine getiremez.

shape() ile işaret oluşturma

shape()'ü kullanarak aynı sonucu karşılaştırın. Şekil işlevi, SVG yol komutlarına benzer bir dizi komutu kabul eder. Ancak bu komutlar, herhangi bir CSS biriminde CSS uzunluklarını ve yüzdelerini kabul eder.

Aşağıdaki CSS, shape() işaretini yüzde birimleri ile dönüştürür:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Duyarlı olun

Mevcut CSS uzunluklarının tamamıyla her koordinat için hangilerinin kullanılacağını seçebilirsiniz.

Örneğin, bayrak boyutunun tamamını öğenin boyutuna göre ölçeklendirmek ancak eğrinin yüksekliğini sabit tutmak için aşağıdakileri yapabilirsiniz:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Özel özellikler ve animasyonlar ekleme

Şekil artık CSS'de tanımlandığından, yüksekliği değiştirmeyi kolaylaştırmak için özel özellikleri de kullanabilirsiniz:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Dilerseniz @property tanımlayıcısı kullanarak CSS mülkünü canlandırabilir ve aşırı aşmaması için sabitleyebilirsiniz:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Demoyu deneyin

Chrome 135 veya Safari 18.4'te, clip-path: shape() kullanılarak oluşturulan animasyonlu bayrak şeklini bu CodePen demosunda görebilirsiniz.

Özet

clip-path: shape(), öğenizi keyfi ve duyarlı şekiller kullanarak kırpmanıza olanak tanır. Daha önce bu işlem yalnızca konik degradeler veya JavaScript ile oluşturulmuş SVG gibi tekniklerle mümkündü.

Tam söz dizimi için özelleştirmeyi kontrol edin.

Şu anda yalnızca clip-path için kullanılabilir. Gelecekte, öğenin kenarlığının şeklini ayarlamak için bu tür şekilleri kullanmayı planlıyoruz. Bu sayede, dikdörtgen olmayan daha fazla ifade biçimi sunabileceğiz.