Tengo una fórmula para determinar el diámetro de un círculo, de modo que, para cualquier rectángulo dado, el centro superior y el perímetro del círculo tocan el centro superior y las esquinas inferiores del rectángulo.

 diameter = width * width / 4 / height + height // width and height of the rectangle

Sin embargo, lo que ahora debo hacer es crear una forma como la siguiente, que sé que se puede lograr con clip-path: polygon() , posiblemente simplificando aún más el uso de la regla de relleno evenodd de polygon() .

El problema es que no estoy familiarizado con clip-path: polygon y apesta en matemáticas, por lo que no estoy muy seguro de si se puede hacer aún más simple usando la regla de relleno evenodd , y mucho menos cómo generar el conjunto de vértices para tramar

Obviamente, una solución CSS pura es ideal. Sin embargo, puedo usar JS si esto es imposible de hacer solo con CSS.

¿Algunas ideas?