fix: arrow compatibility (#36266)

* fix: arrow campatibility

* chore: code clean

* chore: rm useless style

* chore: code clean

* fix: use inset

* chore: bundlesize optimization

* chore: rm useless style

* chore: rm useless style

components/date-picker/style/index.less

@@ -322,11 +322,6 @@
     width: @arrow-size;
     height: @arrow-size;
     margin-left: @input-padding-horizontal-base * 1.5;
-    background: linear-gradient(
-      135deg,
-      transparent 40%,
-      @calendar-bg 40%
-    ); // Use linear-gradient to prevent arrow from covering text
     box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
     transition: left @animation-duration-slow ease-out;
     .roundedArrow(@arrow-size, 5px, @calendar-bg);

components/dropdown/style/index.less

@@ -70,11 +70,6 @@
     display: block;
     width: @popover-arrow-width;
     height: @popover-arrow-width;
-    background: linear-gradient(
-      135deg,
-      transparent 40%,
-      @popover-bg 40%
-    ); // Use linear-gradient to prevent arrow from covering text
     .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
   }
 

components/popover/style/index.less

@@ -139,7 +139,6 @@
       width: @popover-arrow-width;
       height: @popover-arrow-width;
       margin: auto;
-      background-color: @popover-bg;
       content: '';
       pointer-events: auto;
       .roundedArrow(@popover-arrow-width, 5px);

components/style/mixins/rounded-arrow.less

@@ -36,6 +36,7 @@
     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'
     );

components/tooltip/style/index.less

@@ -97,7 +97,6 @@
       width: @tooltip-arrow-width;
       height: @tooltip-arrow-width;
       margin: auto;
-      background-color: transparent;
       content: '';
       pointer-events: auto;
       .roundedArrow(@tooltip-arrow-width, 5px);