CSS Math dan Shape(): Membangun Poligon Beraturan yang Menarik

CSS terus berkembang, menawarkan cara yang semakin canggih untuk mendesain dan menata web. Dua fitur yang sangat menarik adalah css-math dan fungsi shape(). Bersama-sama, keduanya memungkinkan kita membuat bentuk-bentuk kompleks, termasuk poligon beraturan, secara langsung dalam CSS tanpa memerlukan gambar atau SVG. Artikel ini akan membahas secara mendalam bagaimana memanfaatkan css-math dan shape() untuk membangun poligon beraturan yang visualnya menakjubkan dan responsif.

Daftar Isi

1. Pendahuluan: Kekuatan CSS Math dan Shape()
   • Apa itu CSS Math?
   • Apa itu fungsi shape()?
   • Mengapa menggunakan CSS untuk poligon?
2. Dasar-Dasar Poligon Beraturan
   • Definisi dan properti poligon beraturan
   • Geometri yang mendasari perhitungan
   • Sudut internal dan eksternal
3. Menerapkan Poligon Beraturan dengan shape()
   • Sintaks dasar fungsi shape()
   • Memahami parameter circle(), ellipse(), inset(), dan polygon()
   • Fokus pada polygon() untuk poligon beraturan
4. Menggunakan CSS Math untuk Perhitungan Poligon
   • Menghitung koordinat vertex menggunakan trigonometri (sinus dan cosinus)
   • Mendefinisikan variabel CSS untuk fleksibilitas
   • Membuat fungsi CSS untuk modularitas
5. Contoh Praktis: Membangun Berbagai Poligon Beraturan
   • Segitiga sama sisi
   • Persegi (Bujur Sangkar)
   • Pentagon
   • Heksagon
   • Heptagon
   • Oktagon
   • Nonagon
   • Dekagon
6. Responsivitas dan Skalabilitas
   • Menggunakan satuan relatif (em, rem, vh, vw)
   • Media Queries untuk penyesuaian ukuran
   • Memastikan proporsi yang tepat di berbagai ukuran layar
7. Animasi dan Transisi
   • Animasi transformasi (rotate, scale)
   • Transisi warna dan bayangan
   • Menciptakan efek yang menarik
8. Studi Kasus: Aplikasi Poligon di Dunia Nyata
   • Menu navigasi berbasis poligon
   • Latar belakang dekoratif
   • Bentuk interaktif
9. Tips dan Trik Lanjutan
   • Menggunakan kalkulasi CSS yang lebih kompleks
   • Membuat poligon dengan sudut membulat
   • Menggabungkan beberapa bentuk
10. Kinerja dan Pertimbangan Kompatibilitas
    • Dampak kinerja dari shape()
    • Kompatibilitas browser
    • Alternatif (mis., SVG)
11. Kesimpulan: Masa Depan Bentuk CSS

1. Pendahuluan: Kekuatan CSS Math dan Shape()

CSS telah berkembang pesat dari sekadar mengatur teks dan warna. Dengan munculnya fitur-fitur seperti css-math dan fungsi shape(), kita sekarang memiliki kekuatan untuk menciptakan desain visual yang kompleks dan dinamis langsung di dalam stylesheet kita.

Apa itu CSS Math?

CSS Math merujuk pada kemampuan CSS untuk melakukan perhitungan matematika. Ini mencakup fungsi seperti calc(), min(), max(), clamp(), dan fungsi trigonometri seperti sin(), cos(), tan(), atan(), asin(), acos(), pow(), sqrt(). Fungsi-fungsi ini memungkinkan kita melakukan perhitungan matematika langsung dalam nilai-nilai CSS, membuat tata letak dan desain kita lebih responsif dan fleksibel.

Contoh penggunaan calc():

.element {
  width: calc(100% - 20px);
  margin: 10px;
}

Contoh penggunaan sin() dan cos():

:root {
  --angle: 45deg;
  --x: calc(100px * cos(var(--angle)));
  --y: calc(100px * sin(var(--angle)));
}

Apa itu fungsi shape()?

Fungsi shape() adalah properti CSS yang memungkinkan kita menentukan bentuk yang kompleks untuk elemen-elemen kita. Fungsi shape() menggunakan fungsi seperti circle(), ellipse(), inset(), dan polygon() untuk mendefinisikan bentuk-bentuk tersebut. Ini sangat berguna untuk membuat desain yang tidak konvensional dan menarik secara visual tanpa bergantung pada gambar atau SVG.

Contoh penggunaan circle():

.element {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* Membuat lingkaran sempurna */
  shape-outside: circle(50%); /* Membuat bentuk lingkaran untuk konten di sekitarnya */
}

Contoh penggunaan polygon():

.element {
  width: 200px;
  height: 200px;
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%); /* Membuat segitiga */
}

Mengapa menggunakan CSS untuk poligon?

Ada beberapa alasan mengapa menggunakan CSS untuk membuat poligon lebih disukai daripada metode tradisional seperti gambar atau SVG:

• Fleksibilitas: CSS Math memungkinkan kita melakukan perhitungan dinamis, membuat poligon responsif dan dapat disesuaikan berdasarkan ukuran layar dan faktor lainnya.
• Kinerja: Membuat bentuk dengan CSS seringkali lebih cepat daripada memuat gambar, terutama untuk bentuk yang kompleks.
• Pemeliharaan: Mengubah bentuk yang ditentukan CSS lebih mudah daripada mengedit gambar atau kode SVG.
• Animasi: Bentuk yang dibuat CSS dapat dengan mudah dianimasikan dan ditransisikan menggunakan properti CSS lainnya.
• Aksesibilitas: Dengan menggunakan semantik HTML yang tepat dan ARIA, kita dapat membuat poligon yang dapat diakses oleh semua pengguna.

2. Dasar-Dasar Poligon Beraturan

Sebelum kita menyelami implementasi CSS, mari kita tinjau beberapa konsep dasar tentang poligon beraturan.

Definisi dan properti poligon beraturan

Poligon beraturan adalah poligon yang semua sisinya sama panjang dan semua sudutnya sama besar. Contoh poligon beraturan termasuk segitiga sama sisi, persegi, pentagon beraturan, dan heksagon beraturan.

Properti penting dari poligon beraturan:

• Semua sisi sama panjang.
• Semua sudut internal sama besar.
• Semua sudut eksternal sama besar.
• Poligon dapat ditulis dalam lingkaran.
• Poligon dapat melingkari lingkaran.

Geometri yang mendasari perhitungan

Untuk membuat poligon beraturan menggunakan CSS, kita perlu memahami geometri yang mendasarinya, khususnya bagaimana menghitung koordinat vertex (titik sudut) dari poligon. Ini melibatkan penggunaan trigonometri, khususnya fungsi sinus dan cosinus.

Koordinat vertex dari poligon beraturan dapat dihitung menggunakan rumus berikut:

x = centerX + radius * cos(angle)

y = centerY + radius * sin(angle)

Di mana:

• centerX dan centerY adalah koordinat pusat poligon.
• radius adalah jari-jari lingkaran yang mengelilingi poligon.
• angle adalah sudut vertex saat ini dalam radian.

Sudut internal dan eksternal

Sudut internal dan eksternal dari poligon beraturan penting untuk perhitungan kita.

• Sudut internal: Sudut di dalam poligon di setiap vertex. Untuk poligon beraturan dengan n sisi, sudut internalnya adalah (n - 2) * 180 / n derajat.
• Sudut eksternal: Sudut antara sisi poligon dan perpanjangan dari sisi yang berdekatan. Untuk poligon beraturan, sudut eksternalnya adalah 360 / n derajat.

3. Menerapkan Poligon Beraturan dengan shape()

Fungsi shape() dalam CSS memungkinkan kita mendefinisikan bentuk yang kompleks untuk elemen kita. Ini adalah alat yang ampuh untuk membuat poligon beraturan.

Sintaks dasar fungsi shape()

Sintaks dasar untuk menggunakan fungsi shape() adalah:

.element {
  shape-outside: shape-function;
  /* Atau */
  clip-path: shape-function;
}

shape-outside digunakan untuk mendefinisikan bentuk di sekitar elemen tempat konten lain dapat mengalir. clip-path digunakan untuk memotong elemen ke bentuk tertentu.

Memahami parameter circle(), ellipse(), inset(), dan polygon()

Fungsi shape() dapat menggunakan berbagai fungsi untuk mendefinisikan bentuk:

• circle(): Membuat lingkaran.
• ellipse(): Membuat elips.
• inset(): Membuat persegi panjang dengan sudut offset.
• polygon(): Membuat bentuk kompleks dengan menghubungkan serangkaian titik (vertex).

Contoh:

.circle {
  shape-outside: circle(50%);
}

.ellipse {
  shape-outside: ellipse(50% 30%);
}

.inset {
  shape-outside: inset(10px 20px 30px 40px);
}

Fokus pada polygon() untuk poligon beraturan

Untuk membuat poligon beraturan, kita akan fokus pada fungsi polygon(). Fungsi polygon() mengambil daftar pasangan koordinat (x, y) yang mendefinisikan vertex dari poligon.

Sintaks untuk polygon() adalah:

.element {
  shape-outside: polygon(x1 y1, x2 y2, x3 y3, ...);
}

Di mana x1, y1, x2, y2, dan seterusnya adalah koordinat dari setiap vertex.

4. Menggunakan CSS Math untuk Perhitungan Poligon

Untuk mendefinisikan koordinat vertex dari poligon beraturan, kita akan menggunakan CSS Math, khususnya fungsi trigonometri.

Menghitung koordinat vertex menggunakan trigonometri (sinus dan cosinus)

Seperti yang disebutkan sebelumnya, kita dapat menghitung koordinat vertex menggunakan rumus berikut:

x = centerX + radius * cos(angle)

y = centerY + radius * sin(angle)

Dalam CSS, kita dapat menggunakan fungsi cos() dan sin() untuk melakukan perhitungan ini. Ingatlah bahwa fungsi ini bekerja dengan radian, jadi kita perlu mengonversi sudut dari derajat ke radian.

Rumus untuk mengonversi derajat ke radian adalah:

radians = degrees * (PI / 180)

Di mana PI adalah konstanta matematika (sekitar 3.14159).

Mendefinisikan variabel CSS untuk fleksibilitas

Untuk membuat kode kita lebih fleksibel dan mudah dipelihara, kita dapat menggunakan variabel CSS (custom properties) untuk menyimpan nilai-nilai seperti jumlah sisi, jari-jari, dan sudut pusat.

Contoh:

:root {
  --sides: 6;
  --radius: 100px;
  --angle: calc(360deg / var(--sides));
}

Membuat fungsi CSS untuk modularitas

Untuk menghindari pengulangan kode dan membuat kode kita lebih modular, kita dapat membuat fungsi CSS (menggunakan properti custom dan calc()) untuk menghitung koordinat vertex.

Contoh:

:root {
  --sides: 6;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle))));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle))));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle))));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle))));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle))));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle))));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle))));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle))));

  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle))));
  --y5: calc(var(--centerY) + var(--radius) * sin(calc(4 * var(--angle))));

  --x6: calc(var(--centerX) + var(--radius) * cos(calc(5 * var(--angle))));
  --y6: calc(var(--centerY) + var(--radius) * sin(calc(5 * var(--angle))));
}

.hexagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4), var(--x5) var(--y5), var(--x6) var(--y6));
}

5. Contoh Praktis: Membangun Berbagai Poligon Beraturan

Sekarang, mari kita lihat contoh-contoh praktis tentang bagaimana membangun berbagai poligon beraturan menggunakan CSS Math dan fungsi shape().

Segitiga sama sisi

:root {
  --sides: 3;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 90deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 90deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 90deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 90deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 90deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 90deg)));
}

.triangle {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3));
}

Persegi (Bujur Sangkar)

:root {
  --sides: 4;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 45deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 45deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 45deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 45deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 45deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 45deg)));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 45deg)));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 45deg)));
}

.square {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4));
}

Pentagon

:root {
  --sides: 5;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 90deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 90deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 90deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 90deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 90deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 90deg)));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 90deg)));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 90deg)));

  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle) - 90deg)));
  --y5: calc(var(--centerY) + var(--radius) * sin(calc(4 * var(--angle) - 90deg)));
}

.pentagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4), var(--x5) var(--y5));
}

Anda dapat mengikuti pola ini untuk membuat poligon beraturan dengan lebih banyak sisi. Cukup sesuaikan nilai --sides dan tambahkan variabel --x dan --y yang sesuai untuk setiap vertex.

Heksagon

:root {
  --sides: 6;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 90deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 90deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 90deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 90deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 90deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 90deg)));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 90deg)));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 90deg)));

  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle) - 90deg)));
  --y5: calc(var(--centerY) + var(--radius) * sin(calc(4 * var(--angle) - 90deg)));

  --x6: calc(var(--centerX) + var(--radius) * cos(calc(5 * var(--angle) - 90deg)));
  --y6: calc(var(--centerY) + var(--radius) * sin(calc(5 * var(--angle) - 90deg)));
}

.hexagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4), var(--x5) var(--y5), var(--x6) var(--y6));
}

Heptagon

:root {
  --sides: 7;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 90deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 90deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 90deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 90deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 90deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 90deg)));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 90deg)));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 90deg)));

  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle) - 90deg)));
  --y5: calc(var(--centerY) + var(--radius) * sin(calc(4 * var(--angle) - 90deg)));

  --x6: calc(var(--centerX) + var(--radius) * cos(calc(5 * var(--angle) - 90deg)));
  --y6: calc(var(--centerY) + var(--radius) * sin(calc(5 * var(--angle) - 90deg)));

  --x7: calc(var(--centerX) + var(--radius) * cos(calc(6 * var(--angle) - 90deg)));
  --y7: calc(var(--centerY) + var(--radius) * sin(calc(6 * var(--angle) - 90deg)));
}

.heptagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4), var(--x5) var(--y5), var(--x6) var(--y6), var(--x7) var(--y7));
}

Oktagon

:root {
  --sides: 8;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 67.5deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 67.5deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 67.5deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 67.5deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 67.5deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 67.5deg)));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 67.5deg)));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 67.5deg)));

  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle) - 67.5deg)));
  --y5: calc(var(--centerY) + var(--radius) * sin(calc(4 * var(--angle) - 67.5deg)));

  --x6: calc(var(--centerX) + var(--radius) * cos(calc(5 * var(--angle) - 67.5deg)));
  --y6: calc(var(--centerY) + var(--radius) * sin(calc(5 * var(--angle) - 67.5deg)));

  --x7: calc(var(--centerX) + var(--radius) * cos(calc(6 * var(--angle) - 67.5deg)));
  --y7: calc(var(--centerY) + var(--radius) * sin(calc(6 * var(--angle) - 67.5deg)));

  --x8: calc(var(--centerX) + var(--radius) * cos(calc(7 * var(--angle) - 67.5deg)));
  --y8: calc(var(--centerY) + var(--radius) * sin(calc(7 * var(--angle) - 67.5deg)));
}

.octagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4), var(--x5) var(--y5), var(--x6) var(--y6), var(--x7) var(--y7), var(--x8) var(--y8));
}

Nonagon

:root {
  --sides: 9;
  --radius: 100px;
  --centerX: 50%;
  --centerY: 50%;

  --angle: calc(360deg / var(--sides));

  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 90deg)));
  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 90deg)));

  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 90deg)));
  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 90deg)));

  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 90deg)));
  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 90deg)));

  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 90deg)));
  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 90deg)));

  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle) - 90deg)));
  --y5: calc(var(--centerY) + var(--radius) * sin(calc(4 * var(--angle) - 90deg)));

  --x6: calc(var(--centerX) + var(--radius) * cos(calc(5 * var(--angle) - 90deg)));
  --y6: calc(var(--centerY) + var(--radius) * sin(calc(5 * var(--angle) - 90deg)));

  --x7: calc(var(--centerX) + var(--radius) * cos(calc(6 * var(--angle) - 90deg)));
  --y7: calc(var(--centerY) + var(--radius) * sin(calc(6 * var(--angle) - 90deg)));

  --x8: calc(var(--centerX) + var(--radius) * cos(calc(7 * var(--angle) - 90deg)));
  --y8: calc(var(--centerY) + var(--radius) * sin(calc(7 * var(--angle) - 90deg)));

  --x9: calc(var(--centerX) + var(--radius) * cos(calc(8 * var(--angle) - 90deg)));
  --y9: calc(var(--centerY) + var(--radius) * sin(calc(8 * var(--angle) - 90deg)));
}

.nonagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(var(--x1) var(--y1), var(--x2) var(--y2), var(--x3) var(--y3), var(--x4) var(--y4), var(--x5) var(--y5), var(--x6) var(--y6), var(--x7) var(--y7), var(--x8) var(--y8), var(--x9) var(--y9));
}

Dekagon

:root {

  --sides: 10;

  --radius: 100px;

  --centerX: 50%;

  --centerY: 50%;

  --angle: calc(360deg / var(--sides));
  --x1: calc(var(--centerX) + var(--radius) * cos(calc(0 * var(--angle) - 90deg)));

  --y1: calc(var(--centerY) + var(--radius) * sin(calc(0 * var(--angle) - 90deg)));
  --x2: calc(var(--centerX) + var(--radius) * cos(calc(1 * var(--angle) - 90deg)));

  --y2: calc(var(--centerY) + var(--radius) * sin(calc(1 * var(--angle) - 90deg)));
  --x3: calc(var(--centerX) + var(--radius) * cos(calc(2 * var(--angle) - 90deg)));

  --y3: calc(var(--centerY) + var(--radius) * sin(calc(2 * var(--angle) - 90deg)));
  --x4: calc(var(--centerX) + var(--radius) * cos(calc(3 * var(--angle) - 90deg)));

  --y4: calc(var(--centerY) + var(--radius) * sin(calc(3 * var(--angle) - 90deg)));
  --x5: calc(var(--centerX) + var(--radius) * cos(calc(4 * var(--angle) - 90deg)));

  --y5: calc(var(--centerY) + var(--radius) *