[CSS disclosure] adaptive ellipse

Tip: Create circles, ellipses, and other shapes with Border-radius attributes

Disclaimer: The blog Yard Code Editor filters the Border-radius in the inline style, so the ellipse effect is not visible on the page.

Border-radius in order Border-top-left-radius, Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius

No inheritance, applies to CSS animations. Border-radius can specify the horizontal and vertical radii individually, with a slash/divider in the middle.

When the sum of the radii of any two adjacent fillets exceeds the size of Border-box, the user agent must proportionally reduce the values used for each border radius until they do not overlap each other.

Border-radius can accept not only the length value, but also the percentage value. this percentage is parsed based on the dimension of the element, and the percentage of the vertical radius is parsed relative to the height of the element, and the percentage of the horizontal radius is resolved relative to the element's width.

Essential Understanding: Border-radius is the border-box of the elements of the fillet processing, the border outside the corner as a tangent fillet of the datum, the inside of the border will be slightly smaller fillet. Max (0, [border-radius]-[border-width]) Strictly speaking

General Graphics

1. Half ellipse facing up

border-radius:50%/100% 100% 0 0;

When the radius of One Direction is 0 o'clock, the radius of the other direction can be any value.

2. Half-ellipse facing left

border-radius:100%/50% 0 0 50%;

3. One-fourth Ellipse

border-radius:100% 0 0 0;

Works Appreciation

Http://simurai.com/archive/buttons

It shows all kinds of wonderful shapes.

Reference Case Address

Play.csssecrets.io/quarter-ellipse

Play.csssecrets.io/half-ellipse

Play.csssecrets.io/ellipse

[CSS disclosure] adaptive ellipse