是否有 CSS 方法可以在悬停时填充自定义形状？答案

【问题标题】：Is there a CSS method to fill a custom shape upon hover?是否有 CSS 方法可以在悬停时填充自定义形状？
【发布时间】：2018-02-16 18:49:10
【问题描述】：

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

https://codepen.io/al2613/pen/xYXPvB

$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;
  }
}

【问题讨论】：

在问问题之前请先做一点研究！！！看this example
遮罩、剪辑路径……甚至只是回到老派学校，使用经典的方式在 CSS 上绘制三角形，并在伪元素之前和之后添加边框。这可能是挑战的意图。这种方法不仅应该使其兼容 IE 11，甚至可以兼容 IE8。
@RajnishRajput - 既然您已经屈尊 OP，您能否与她分享如何将您的参考转换为她的要求？请注意，她的挑战缺少 li > a 结构，因此无法访问父 (li) 元素伪元素。
@Forty3 surly OP 的挑战不是挑战。对于她想要实现的目标来说，这只是一个错误的架构。为什么她为此选择了button，但毕竟她可以使用li 内部的按钮，如果有人认为该按钮不起作用，那么她可以使用buttons 而不是li 和span 而不是a如果她想让她更轻松......让新手努力，我相信他们可以自己学习更好:)
谢谢！我最终使用了剪辑方法。可能不是最好的 CSS 大声笑我总是乐于听取改进的方法！ codepen.io/al2613/pen/zRPdYL

标签： html css sass

【解决方案1】：

解决方案是调整before pesudo 元素并在悬停button 时调整其background-color。

Codepen

请让我知道这是否有帮助。

【讨论】：

谢谢！这非常有帮助。我最终使用了剪辑方法，最后效果很好。
很高兴能帮上忙。您可以发布您的答案并投票和/或选择正确的答案，以便帮助其他用户。谢谢。