Question

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

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

Answer 1

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

Codepen

请告诉我这是否有帮助。

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

1 个答案: