Html 是否有CSS方法在悬停时填充自定义形状？

正在处理这个CSS挑战。我可以让按钮看起来像它应该的样子，但我想知道是否有办法让悬停背景颜色适合箭头的空间？我正在研究fill方法，但认为它不会起作用，因为它不是svg

---

解决方案是在pesudo元素之前调整

，并在悬停
按钮时调整其
背景色


请让我知道这是否有帮助。
在提问之前，请做一些研究！！！看看面具，剪辑路径。。。或者干脆老一套，用经典的方法在CSS上画三角形，在伪元素前后加上边框。这可能就是挑战的意图。这种方法不仅可以兼容IE11，甚至可以兼容IE8。@RajnishRajput-既然你已经屈尊于OP，你能和她分享一下如何将你的参考转化为她的需求吗？请注意，她的质询缺少
li>a
结构，因此无法访问父（
li
）元素伪元素。@Forty3 surly OP的质询不是质询。对于她想要实现的目标来说，这只是一个错误的架构。为什么她选择了
按钮
，但毕竟她可以使用
里的按钮
，如果有人认为按钮不起作用，那么她可以使用
按钮
，而不是
里
，
span
而不是
a
，只要她想让自己更容易。。。。。。并且让新手做一些努力，我相信他们可以在那里自学得更好：）谢谢！我最终使用了剪辑法。可能不是最好的CSS lol，我总是乐于听取改进方法！非常感谢。这非常有帮助。最后我使用了剪辑法，结果很好。很高兴我能帮上忙。您可以发布您的答案并投票和/或选择正确的答案，以帮助其他用户。非常感谢。
$primary-color: adjust-hue(MediumAquamarine, 13);
$primary-accent: PeachPuff;
$default-font: "Delius", sans-serif;

body {
background-color: $primary-color;
font-family: $default-font;
}

h1 {
border-bottom: 1px solid $primary-accent;
text-align: center;
padding: 10px;
}

.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px 30px;
margin-top: 50px;
border-radius: 30px 0 /30px 60px;
box-shadow: 0px 1px 2px 1px darken($primary-color, 11);
}

.button-group {
text-align: center;
width: 350px;
margin: 0 auto;
border: none;
position: relative;

   .button-with-arrow {
      height: 35px;
      position: relative;
      width: 110px;
      background-color: $primary-accent;
      border: none;
      overflow: hidden;
      margin: -2px;
      transition: background-color 0.3s ease-out;
    }

     button:nth-child(-n+2)::after {
     position: absolute;
     border-right: 2px solid white;
     border-bottom: 2px solid white;
     content: "";
     width: 100px;
     height: 35px;
     right: -2px;
     top: 22px;
     transform: rotate(-45deg)
   }
    button:hover{
    background-color: darken( $primary-accent, 13%);
    transition: 0.3;
  }
}