.roundedArrow( @arrow-size, @border-radius-outer, @border-radius-inner, @bg-color: var(--antd-arrow-background-color), @box-shadow: none ) { @unit-width: (unit(@arrow-size) / 2); @border-radius-outer-without-unit: unit(@border-radius-outer); @border-radius-inner-without-unit: unit(@border-radius-inner); @a-x: 0; @a-y: @unit-width; @b-x: ((@border-radius-outer-without-unit * 1) / sqrt(2)); @b-y: (@unit-width - @border-radius-outer-without-unit * (1 - 1 / sqrt(2))); @c-x: (@unit-width - @border-radius-inner-without-unit * (1 / sqrt(2))); @c-y: (@border-radius-outer-without-unit * (sqrt(2) - 1) + @border-radius-inner-without-unit * (1 / sqrt(2))); @d-x: 2 * @unit-width - @c-x; @d-y: @c-y; @e-x: 2 * @unit-width - @b-x; @e-y: @b-y; @f-x: 2 * @unit-width - @a-x; @f-y: @a-y; @arrow-shadow-width: @unit-width * sqrt(2) + @border-radius-outer * (sqrt(2) - 2); // polygon offset @polygon-offset: @border-radius-outer * (sqrt(2) - 1); @polygon-right: @arrow-size - @polygon-offset; @arrow-polygon: polygon(@polygon-offset 100%, 50% @polygon-offset, @polygon-right 100%, @polygon-offset 100%); @arrow-path: path('M @{a-x} @{a-y} A @{border-radius-outer-without-unit} @{border-radius-outer-without-unit} 0 0 0 @{b-x} @{b-y} L @{c-x} @{c-y} A @{border-radius-inner-without-unit} @{border-radius-inner-without-unit} 0 0 1 @{d-x} @{d-y} L @{e-x} @{e-y} A @{border-radius-outer-without-unit} @{border-radius-outer-without-unit} 0 0 0 @{f-x} @{f-y} Z'); width: @arrow-size; height: @arrow-size; overflow: hidden; pointer-events: none; &::before { position: absolute; bottom: 0; width: @arrow-size; height: calc(@arrow-size / 2); background: @bg-color; content: ''; clip-path: @arrow-polygon; // For browser that do not support path() clip-path: @arrow-path; inset-inline-start: 0; } &::after { position: absolute; bottom: 0; z-index: 0; width: @arrow-shadow-width; height: @arrow-shadow-width; margin: auto; background: transparent; border-radius: 0 0 @border-radius-inner; box-shadow: @box-shadow; transform: translateY(50%) rotate(-135deg); content: ''; inset-inline: 0; } }