0
183
ViewsCreating complex polygon
I have a formula to determine the diameter of a circle, so that, for any given rectangle, the top center and perimeter of the circle touch the top center and bottom corners of the rectangle.
diameter = width * width / 4 / height + height // width and height of the rectangle
However, what I now need to do is create a shape like below, which I know can be accomplished with clip-path: polygon(), possibly being made even simpler by using the evenodd fill-rule of polygon().
The problem is that I am unfamiliar with clip-path: polygon and suck at math, so I am not quite sure if it can be made even simpler by using the evenodd fill-rule, let alone how to go about generating the set of vertices to plot.
Obviously, a pure CSS solution is ideal. However, I can use JS if this is impossible to do with CSS alone.
Any ideas?
1 answers
Answer question0
A radial-gradient can do the job here:
.box {
--w:200;
--h:100;
--d:calc((var(--w)*var(--w))/(4*var(--h)) + var(--h));
width:calc(var(--w)*1px);
height:calc(var(--h)*1px);
background:
radial-gradient(farthest-side,blue 98%,red)
top/calc(var(--d)*1px) calc(var(--d)*1px);
border:1px solid;
}<div class="box"></div>
<div class="box" style="--w:300"></div>
<div class="box" style="--h:50"></div>