1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- .roundedArrow(@width, @outer-radius, @bg-color: var(--antd-arrow-background-color)) {
- @corner-height: unit(((@outer-radius) * (1 - 1 / sqrt(2))));
- @width-without-unit: unit(@width);
- @outer-radius-without-unit: unit(@outer-radius);
- @inner-radius-without-unit: unit(@arrow-border-radius);
- @a-x: @width-without-unit - @corner-height;
- @a-y: 2 * @width-without-unit + @corner-height;
- @b-x: @a-x + @outer-radius-without-unit * (1 / sqrt(2));
- @b-y: 2 * @width-without-unit;
- @c-x: 2 * @width-without-unit - @inner-radius-without-unit;
- @c-y: 2 * @width-without-unit;
- @d-x: 2 * @width-without-unit;
- @d-y: 2 * @width-without-unit - @inner-radius-without-unit;
- @e-x: 2 * @width-without-unit;
- @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
- @f-x: 2 * @width-without-unit + @corner-height;
- @f-y: @width-without-unit - @corner-height;
- @g-x: @f-x - 1;
- @g-y: @f-y;
- @h-x: @a-x;
- @h-y: @a-y - 1;
- border-radius: 0 0 @arrow-border-radius;
- pointer-events: none;
- &::before {
- position: absolute;
- top: -@width;
- left: -@width;
- width: @width * 3;
- height: @width * 3;
- background: @bg-color;
- // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
- background-repeat: no-repeat;
- background-position: ceil(-@width + 1px) ceil(-@width + 1px);
- content: '';
- clip-path: inset(33% 33%); // For browsers that do not support path()
- clip-path: path(
- 'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
- );
- }
- }
|