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

Noam Rosenthal

Yayınlanma tarihi: 8 Nisan 2025

clip-path özelliği, bir öğenin şeklini daire, poligon veya SVG yoluyla kırparak değiştirmenize olanak tanır. Ancak Chrome 135 ve Safari 18.4'ten önce, duyarlı çokgenler ile SVG yollarını kullanarak duyarlı olmayan daha karmaşık şekiller arasında seçim yapmanız gerekiyordu. Yeni shape() işleviyle, clip-path öğeyi duyarlı olan poligon olmayan 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 tam olarak bir çokgen değildir. Bunun nedeni, üst ve alt kenarlarının düz çizgiler veya yuvarlak köşeler yerine kübik Bézier eğrileri olmasıdır.

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 komutundan oluşur:

1. 0, 20'ye taşıyın.
2. Kontrol noktalarını (25,0 ve 75, 40) kullanarak 100, 20 eğrisi oluşturun.
3. 80'e kadar dikey çizgi.
4. Kontrol noktalarını (75,100 ve 25,50) kullanarak 0, 80'e eğri oluşturun.
5. Yolu kapatın (0,20 noktasına giden çizgi).

Bu kod, bir bayrak şekli çizer ancak tüm birimler piksel cinsindendir. SVG, bu pikselleri bir görünüm kutusuna ölçeklendirebilir ancak bu işlem, her zaman şeklin tamamının geometrik ölçeklendirilmesi gibi görünür.

Ö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 iş için uygun değildir.

shape() ile işaret oluşturma

shape() kullanarak aynı sonucu karşılaştırın. Şekil işlevi, SVG yolu 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 birimleriyle 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ı hale getirin

CSS uzunluklarının tamamı kullanıma sunulduğundan her koordinat için hangi uzunlukları kullanacağınızı seçebilirsiniz.

Örneğin, bayrağın tamamının boyutunu öğ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ığı için yüksekliği kolayca değiştirmek üzere özel özellikler 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
  )
}

Hatta @property tanımlayıcısını kullanarak CSS özelliğine animasyon ekleyebilir ve aşırıya kaçmaması için sınırlayabilirsiniz:

@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, bu CodePen demosunda clip-path: shape() kullanılarak oluşturulan animasyonlu bayrak şeklini görebilirsiniz.

Özet

clip-path: shape(), öğenizi rastgele ve duyarlı şekiller kullanarak kırpmanıza olanak tanır. Bu işlem daha önce yalnızca konik gradyanlar veya JavaScript ile oluşturulmuş SVG gibi teknikler kullanılarak mümkündü.

Sözdiziminin tamamı için şartnameyi inceleyin.

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