rounded-arrow.less 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. .roundedArrow(@width, @outer-radius, @bg-color: var(--antd-arrow-background-color)) {
  2. @corner-height: unit(((@outer-radius) * (1 - 1 / sqrt(2))));
  3. @width-without-unit: unit(@width);
  4. @outer-radius-without-unit: unit(@outer-radius);
  5. @inner-radius-without-unit: unit(@arrow-border-radius);
  6. @a-x: @width-without-unit - @corner-height;
  7. @a-y: 2 * @width-without-unit + @corner-height;
  8. @b-x: @a-x + @outer-radius-without-unit * (1 / sqrt(2));
  9. @b-y: 2 * @width-without-unit;
  10. @c-x: 2 * @width-without-unit - @inner-radius-without-unit;
  11. @c-y: 2 * @width-without-unit;
  12. @d-x: 2 * @width-without-unit;
  13. @d-y: 2 * @width-without-unit - @inner-radius-without-unit;
  14. @e-x: 2 * @width-without-unit;
  15. @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
  16. @f-x: 2 * @width-without-unit + @corner-height;
  17. @f-y: @width-without-unit - @corner-height;
  18. @g-x: @f-x - 1;
  19. @g-y: @f-y;
  20. @h-x: @a-x;
  21. @h-y: @a-y - 1;
  22. border-radius: 0 0 @arrow-border-radius;
  23. pointer-events: none;
  24. &::before {
  25. position: absolute;
  26. top: -@width;
  27. left: -@width;
  28. width: @width * 3;
  29. height: @width * 3;
  30. background: @bg-color;
  31. // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
  32. background-repeat: no-repeat;
  33. background-position: ceil(-@width + 1px) ceil(-@width + 1px);
  34. content: '';
  35. clip-path: inset(33% 33%); // For browsers that do not support path()
  36. clip-path: path(
  37. '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'
  38. );
  39. }
  40. }