Abstract CSS fillet effect with JS implementation

This article mainly introduces the use of JS to achieve the abstract CSS fillet effect, has a certain reference value, now share to everyone, there is a need for friends can refer to

Maybe last year, I've seen the CSS and HTML code of the CSS fillet effect on the Internet, for example:

Of course, this artificially set the fillet value, but also very useful, basically this code to take the past can be used, but if you want to change the size of the fillet, to add a border or base its effect on this corner, then this code will not play its power. Just want to do a piece of the component of the image to come out! This year is a time spent almost a day!

Think about it, the four corners of the fillet are added exactly to a circle, and the expression of the circle is X*x+y*y=r*r, that is, the square of X plus the square of y equals the square of the radius! With this formula, the theory of circular solution can be solved!

Start a step-by-step test by not having to have, from 0 to modular! I divide a fillet into such a structure
[Top] [Top fillet Display control] [/Top]
Subject [Show circle Solution control on left side of main body] [Main content] [on the right side of the main body shows he control] [/subject]
Bottom [Bottom Circle Solution Display control] [/Bottom]
Get today's test code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!