İç İçe Öğelerde Kusursuz Yuvarlak Köşeler

Yuvarlak bir kutuyu başka bir yuvarlak kutunun içine koyun, ikisine de aynı border-radius'u verin; bir şeyler tuhaf görünür. Aralarındaki boşluk kenarlar boyunca eşittir ama köşelerde şişer. Yarıçapı değiştirin ve iki boşluğu karşılaştırın.

Sebebi şu: Her yuvarlak köşe bir çemberin parçasıdır ve border-radius o çemberin yarıçapıdır. İki eğri ancak çemberleri aynı merkezi paylaşıyorsa, bir ağacın halkaları gibi, birbirinden hep aynı uzaklıkta kalır. Yarıçaplar aynıyken iç çember dıştaki kadar büyüktür ama daha içeriden başlar, bu yüzden merkezi yanlış yerdedir.

İç merkezi dıştakinin üzerine taşımak için iç çemberin, iki kenar arasındaki mesafe kadar küçük olması gerekir. Bu mesafeye boşluk diyelim: padding ve dış kutunun kenarlığı varsa o kenarlık. Yani iç yarıçap, dış yarıçap eksi boşluktur.

Padding'i dış yarıçapın ötesine iterseniz sonuç negatif olur. Yarıçap negatif olamaz, bu yüzden iç köşe düz olur. Bundan sonra köşedeki boşluk her zaman kenarlardakinden biraz geniştir. Bunu düzeltmek için dış yarıçapı büyütün ya da boşluğu küçültün.

CSS'te hesabı tarayıcıya bırakabilirsiniz. Sayıları custom property'lerde tutun ve iç yarıçapı onlardan hesaplayın. Bir calc() sonucu negatif çıkarsa tarayıcı onu zaten 0 kabul eder, ama max() bunu kodu okuyan herkese açıkça gösterir.

.outer {
  --radius: 24px;
  --padding: 8px;
  --border: 1px;

  border: var(--border) solid #333;
  border-radius: var(--radius);
  padding: var(--padding);
}

.inner {
  border-radius: max(0px, var(--radius) - var(--padding) - var(--border));
}

Aynı merkez, aynı mesafe. Kart içinde kart, araç çubuğunda düğme ya da çerçeve içinde görsel gibi yuvarlak şekilleri iç içe koyduğunuzda boşluğu dış yarıçaptan çıkarın; köşeler birbirini izleyecektir.

@aykutkardas

—

0/50 alkış