Web siteleri oluşturmaya ilk başladığımda, yuvarlatılmış köşeler, her köşe için bir tane, gövde için bir tane olmak üzere beş arka plan resmi ve müşterinin farklı bir yarıçap istemeyeceği bir dua gerektiriyordu. Daha sonrasınır yarıçapımülk indi ve tüm ağ toplu olarak rahat bir nefes aldı. Bu on beş yıldan fazla zaman önceydi ve dürüst olmak gerekirse o zamandan beri aynı dalganın üzerinde ilerliyoruz. O zaman olduğu gibi, umarım bu özelliğe yavaş yavaş diğer tarayıcılara da ulaşan aşamalı bir geliştirme olarak bakabiliriz.
iyi birinden hoşlanırımsınır yarıçapıdiğer insanlar gibi ama gerçek şu ki bize yalnızca tek bir şekil veriyor. Yuvarlak. İşte bu. Eğimli köşeler mi istiyorsunuz? Klip yolu. Bilet kenarları kepçeli mi? SVG maskesi. Squircle uygulama simgeleri? Kimsenin sizden animasyon yapmanızı istemeyeceğini umduğunuz, dikkatlice ayarlanmış bir SVG. Sınırlamaların etrafından dolaşıyorduksınır yarıçapıYıllar boyunca bu hack'ler gerçek ödünleşmelerle birlikte gelir: Kenarlıklar klipsli yolları takip etmez, gölgeler kesilir ve sonunda biri dolgu değerini değiştirdiği anda kırılan kırılgan bir kodla karşı karşıya kalırsınız.
Peki, yeniköşe şeklibunların hepsini değiştirir.
köşe şekli?The köşe şeklimülkiyet bir arkadaştırsınır yarıçapı. Onun yerini almaz; şunu değiştirirşekilolan eğrininsınır yarıçapıyaratır. Olmadansınır yarıçapı,köşe şeklihiçbir şey yapmaz. Ama birlikte güçlü bir çiftler.
Özellik şu değerleri kabul eder:
yuvarlak: varsayılan, normal ile aynısınır yarıçapı,sincap: Bir süper elips, pürüzsüz Apple tarzı yuvarlak kare,eğim: iki yarıçap uç noktası arasındaki düz bir çizgi (kesilmiş köşeler),kepçe: içbükey köşeler oluşturan ters bir eğri,çentik: içe doğru keskin kesikler,kare: yuvarlamayı etkili bir şekilde kaldırır, geçersiz kılarsınır yarıçapı.
Ve tıpkı köşe başına farklı değerler ayarlayabilirsiniz.sınır yarıçapı:
*köşe şekli: eğimli yuvarlak kepçe sincap;
/* sol üst, sağ üst, sağ alt, sol alt */Ayrıca şunları da kullanabilirsiniz:süper elips()Ayrıntılı kontrol için sayısal parametreli işlev.
.öğe {
kenarlık yarıçapı: 25px;
köşe şekli: süper elips(0); /* 'eğim'e eşit */
}O halde buradaki soru şu olabilir: neden bu özelliğe “kenar şekli" bunun yerine? Her şeyden önce, buyakında oynayacağımız tamamen farklı bir şey. İkincisi, ana hatlar, kutu gölgeleri ve arka planlar gibi kenarlıklardan biraz daha fazlası için geçerlidir. olan şey buklip yolumülkiyet asla yapamazdı.
Bu yazının yazıldığı sırada (Mart 2026),köşe şekliyalnızca Chrome 139+ ve diğer Chromium tabanlı tarayıcılarda desteklenir. Bu önemli bir kullanıcı kitlesidir, ancak kesinlikle herkes değil. Cazibe, ya mülk her yerde olana kadar görmezden gelmek ya da onsuz dağılan demolar oluşturmaktır.
Her iki yaklaşımın da doğru olduğunu düşünmüyorum. Benim gördüğüm kadarıylaköşe şekliilerici iyileştirme için mükemmel bir adaydır, tıpkısınır yarıçapıInternet Explorer 6 çağındaydı. Temel, halihazırda bildiğimiz teknikleri kullanmalıdır;sınır yarıçapı,klip yolu,radyal-gradyanmaskeler ve kasıtlı olarak iyi görünmek. Ardından, destekleyen tarayıcılar içinköşe şekli, deneyimi yükseltiyoruz. Bazen bu, daha temel bir varsayılanın sağlanması kadar basit olabilir; bazen biraz daha fazla olması gerekebilir.
Bu makaledeki her demo, bu ilerici geliştirme fikriyle oluşturulmuştur.Demoların yapısı şöyle görünür:
@katman tabanı, sunum, demo;The sunumkatman, kanıtlanmış teknikler kullanılarak tamamen cilalanmış kullanıcı arayüzünü içerir.demokatman her şeyi sarar@destekler:
@katman demosu {
@destekler (köşe şekli: eğim) {
/* stilleri burada güncelleyin */
}
}Yedek banner yok, "tarayıcınız bunu desteklemiyor" mesajı yok. Yalnızca iki tasarım katmanı: iyi ve daha iyi. Sadece birkaç örnek göstermenin güzel olabileceğini düşündüm. Halihazırda birkaç tane var ama umarım bunların üstüne biraz daha ilham verebilirim.
Demo 1: Şerit Rozetli Ürün KartlarıHer e-ticaret sitesinde bunlara sahiptir: ürün kartının köşesine iliştirilmiş küçük "Yeni" veya "İndirim" rozetleri. Geleneksel olarak, bu şerit şeklini elde etmek, uzanmak anlamına gelir.klip yolu: polygon()veya döndürülmüş bir sözde öğe, buna birisi dolgu değerini değiştirdiği anda dağılma şansına sahip olan "ilk kod" adını verelim.
Ama olay şu: yapmıyoruzihtiyaçtaban çizgisindeki şerit şekli. Köşeleri hafifçe yuvarlatılmış basit bir rozet de aynı hikayeyi anlatıyor ve son derece güzel görünüyor:
.product__badge {
sınır yarıçapı: 0 4 piksel 4 piksel 0;
arka plan rengi: var(--badge-bg);
}İşte bu. Kartın sol kenarına yaslanmış küçük, temiz bir etiket. Hiçbir şey süslü değil, hiçbir şey kırık değil. Her tarayıcıda çalışır.
Destekleyen tarayıcılar içinköşe şekli, şunları geliştiriyoruz:
@katman demosu {
/* Eğer tarayıcı 'köşe şeklini' destekliyorsa */
@destekler (köşe şekli: eğim) {
.ürün {
kenarlık yarıçapı: 40px;
köşe şekli: sincap;
}
.product__badge {
dolgu: 0,35rem 1,4rem 0,35rem 1rem;
kenarlık yarıçapı: 0 16 piksel 16 piksel 0;
köşe şekli: yuvarlak konik konik yuvarlak;
}
}
}The yuvarlak eğim eğim yuvarlakkombinasyon yönlü bir şerit oluşturur. Kartın kenarıyla buluştuğu yerde yuvarlak, diğer tarafta bir noktaya eğimli. HAYIRklip yolu, sözde eleman hileleri yok. Kenarlıklar, gölgeler ve arka planların tümü belirtilen şekli takip eder çünküöyleşekli.
Kartların kendileri yükseltmekenarlık yarıçapı: 12 pikseldaha büyük bir boyuta vesincapKarşılaştırıldığında standart yuvarlamanın biraz çarpık görünmesini sağlayan köşe şekli, pürüzsüz süper elips eğrisi. Tasarımcılar bunu hemen fark edeceklerdir. Diğer herkes bunun "daha kaliteli hissettirdiğini" söyleyecektir.
Sıcak ipucu:kullanaraksincapKart bileşenlerindeki değer, öncesi ve sonrası arasındaki farkın tek başına ince olabildiği ancak tüm sayfayı dönüştürebildiği yükseltmelerden biridir. Bu iOS etkisidir: Her şey süper elips eğrileri kullandığında, düz dairesel yaylar yersiz görünmeye başlar. Bu demoda biraz abarttım.
Birincil düğme eğimli, yönlü ve mücevher benzeri bir şekilde başlar ve yumuşarsincapfareyle üzerine gelindiğinde. Çünküköşe şeklideğerler onlar aracılığıyla canlanırsüper elips()eşdeğerleri, geçiş düzgündür. Bu, eskiden ulaşılması zor olan ancak artık tek bir özellik haline gelen eğlenceli bir etkileşimdir (birlikte kullanılır).sınır yarıçapı, Elbette).
İkincil düğme şunları kullanır:süper elips(0,5), bir değerarasındastandart bir daire ve bir sincap, daha büyük bir daire ile birleştirildisınır yarıçapıkendine özgü hap benzeri bir şekil için. Tehlike butonu daha belirgin hale geliyorsincapcömert bir yarıçapa sahip. VeçentikVekepçeher biri kendi keskin veya içbükey kişiliğini beraberinde getirir.
Düğmelerin ötesinde durum etiketleri deköşe şekli: çentik, onlara makine damgalı bir görünüm veren keskin içe doğru kesimler. Yön oku etiketlerinin kullanımıyuvarlak eğim eğim yuvarlak(ve geri ok için bunun tersi), eskiden gerekli olanın yerineklip yolu: polygon(). Artık sınırlar ve gölgeler tüm eyaletlerde doğru şekilde çalışıyor.
Sıcak ipucu: köşe şekli: kepçeserif yazı tipleri ve sıcak renk paletleriyle güzel bir şekilde eşleşir. İçbükey eğriler, editoryal tasarımda, kaligrafide ve baskı düzenlerinde bulunan organik şekilleri yansıtıyor. Geometrik sans-serif tasarımları içinsincapveyaeğim.
Bu demoda hoşuma giden şey, şekil hiyerarşisinin içerik hiyerarşisini nasıl yansıttığıdır. En önemli unsur (özellikli plan) en belirgin şeklini alır (kepçe). Rozet en keskin şekli alır (eğim). Geriye kalan her şey daha basit bir yükseltmeye kavuşuyor (sincap). Şekil, yalnızca dekorasyon için değil, görsel vurgu için de bir araç haline geliyor.
Yazım itibariyle,köşe şekliChrome 139+ ve Chromium tabanlı tarayıcılarda kullanılabilir. Firefox ve Safari henüz bunu desteklemiyor. Spesifikasyon yaşıyorCSS Kenarlıkları ve Kutu Süslemeleri Modülü Seviye 4, bu yazının yazıldığı an itibariyle bir W3C Çalışma Taslağıdır.
Pratik kullanım için bu iyi. Bu demoların nasıl oluşturulduğunun asıl amacı budur.sunumkatmanı her tarayıcıya gösterişli, eksiksiz bir kullanıcı arayüzü sunar.demokatman, tarayıcıları desteklemek için bir bonustur;@destekler (köşe şekli: ...). öyle bir dönem yaşadım kisınır yarıçapıyalnızca Firefox'ta mevcuttu. Bir noktada, her web sitesinin her tarayıcıda tamamen aynı görünmesi gerekmediğini unutmuş gibiyiz. Gerçekten istediğimiz şey şu: "bozuk" düzenler ve "tarayıcınız bunu desteklemiyor" mesajları yok; bunun yerine işe yarayan ve giderek daha fazla keyif katan güzel bir deneyim. Başka bir deyişle, tasarımın iki katmanıyla çalışıyoruz: iyi ve daha iyi.
Sürekli olarak geri döndüğüm yaklaşım şu: tasarım yapmayınköşe şeklive tasarlamayınetrafındabunun eksikliği. ile sağlam bir temel tasarlayınsınır yarıçapıve sonra onu geliştirin. Her demodaki sunum katmanı kasıtlı olarak iyi görünüyor. Daha iyi bir tarayıcıyı bekleyen, bozulmuş bir sürüm değil. Bu birkomple tasarım.demokatman bir boyut eklersınır yarıçapıtek başına ifade edemez.
Beni en çok şaşırtan şeyköşe şeklibumenzilBu tek mülkle sahip olduğumuz inanılmaz güç merkezini sunuyor:sincapbu premium için kartlarda ve avatarlarda süper elips hissi;eğimyön öğeleri ve mücevher benzeri rozetler için;kepçeeditoryal sıcaklık ve görsel hiyerarşi için;çentiketiketlerde mekanik hassasiyet için; Vesüper elips()arasında hassas kontrol içinyuvarlakVesincap. Ve köşe başına değerleri karıştırma yeteneği (yuvarlak eğim eğim yuvarlak,yuvarlak topla) SVG maskeleri gerektiren şekilleri açar veyaklip yoluhackler.
Beş arka plan görüntüsünden şuna gittik:sınır yarıçapı, ileköşe şekli. Her adımda bir geçici çözüm kategorisi kaldırıldı. Tasarımcıların bununla neler yapacağını görmek beni heyecanlandırıyor.
İleri Okuma
köşe şekli(MDN)- “Aslında Ne Yapabiliriz?
köşe şekli?”, Daniel Schwarz - CSS Kenarlıkları ve Kutu Süslemeleri Modülü Seviye 4(W3C spesifikasyonu)
- “Eko-etiketler” için eğlenceli bir demo, CodePen'de Sebastian
