From 42e030edd98cb7cb8c8effc67816c735139614df Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 30 Jun 2022 11:11:01 +0800
Subject: [PATCH] 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    | 5 -----
 components/dropdown/style/index.less       | 5 -----
 components/popover/style/index.less        | 1 -
 components/style/mixins/rounded-arrow.less | 1 +
 components/tooltip/style/index.less        | 1 -
 5 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
index cfcdb62ebf..f428f299d6 100644
--- a/components/date-picker/style/index.less
+++ b/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);
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index c800c13a7c..10f8b9db11 100644
--- a/components/dropdown/style/index.less
+++ b/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);
   }
 
diff --git a/components/popover/style/index.less b/components/popover/style/index.less
index 92f3e4d8fb..b256228c6c 100644
--- a/components/popover/style/index.less
+++ b/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);
diff --git a/components/style/mixins/rounded-arrow.less b/components/style/mixins/rounded-arrow.less
index 96503d4b26..1c8264336d 100644
--- a/components/style/mixins/rounded-arrow.less
+++ b/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'
     );
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index b24c2f7675..d2ad5e1263 100644
--- a/components/tooltip/style/index.less
+++ b/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);