带有渐变填充的圆形箭头形状

Question

对于我的在线游戏用户界面，我决定制作 Hill Climb Racing（Android游戏）的按钮。这就是我现在所拥有的：

body {
    color: white;
    font-family: Impact, fantasy;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
}
.rect {
    height: 100px;
    width: 280px;
    background: #545D60;
    border-radius: 20px 50px 50px 20px;
    position: relative;
}
.rect:before {
    background: #545D60;
    content: "";
    position: absolute;
    top: 6px;
    left: 195px;
    height: 0px;
    width: 0px;
    border-radius: 30px 10px;
    border: 44px solid #545D60;
    transform: rotate(45deg);
}

<div class="rect">NEXT</div>

问题在于正确对齐渐变。可以将{strong>渐变背景添加到rect，但相同的渐变与右侧的三角形无法正确对齐。
像这样的解决方案很有帮助，但不适用于我正在尝试的内容： link

另外，我们可以创建具有渐变背景的响应形状吗？

注意：这不是重复，这是一个完全不同的问题。

修改

此外，在悬停时，渐变变为倒置，即旋转180度。我可以创建这部分，但是对齐rect和before的渐变仍然是一个问题。

Answer 1

  

警告：这并不是你想要达到的目的，但在我看来，这可能是实现它的最简单方法，而不需要在梯度中使用SVG或图像或复杂的角度计算。旋转伪元素等会导致另一侧不匹配，因为右边有一个弯曲的边。

通过使用两个伪元素来实现形状，这些伪元素大约是父元素（.rect）的一半大小，将它们向相反方向倾斜，然后将它们恰好一个放在另一个之下。通过使用伪元素的left属性将其放置在父矩形内，可以隐藏另一个偏斜的一侧（左侧）。

将所需的渐变分配给父元素和伪元素。对于父级，根据需要应用完整渐变，而对于伪元素，它在:before和:after元素之间精确地分成两半，以使其看起来像一个渐进的过程。

由于:before和:after伪元素实际上是主要元素的子元素，因此它们上的hover实际上也意味着父元素上的hover。

span包含文本，并且具有更高的z-index，使其位于伪元素之上，从而可见。

＆＃13;

＆＃13;

body {
  color: white;
  font-family: Impact, fantasy;
  font-size: 40px;
  line-height: 100px;
  text-align: center;
}
.rect {
  height: 100px;
  width: 225px;
  position: relative;
  border-radius: 20px 0px 0px 20px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#949DA0), to(#545D60));
  background: -webkit-linear-gradient(#949DA0, #545D60);
  background: -moz-linear-gradient(#949DA0, #545D60);
  background: -o-linear-gradient(#949DA0, #545D60);
  background: linear-gradient(#949DA0, #545D60);
}
.rect span {
  position: relative;
  z-index: 2;
}
.rect:before {
  background: #545D60;
  content: "";
  position: absolute;
  top: 0px;
  left: 42px;
  height: 51%;
  width: 100%;
  border-radius: 0px 10px 6px 0px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#949DA0), to(#747D80));
  background: -webkit-linear-gradient(#949DA0, #747D80);
  background: -moz-linear-gradient(#949DA0, #747D80);
  background: -o-linear-gradient(#949DA0, #747D80);
  background: linear-gradient(#949DA0, #747D80);
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}
.rect:after {
  background: #545D60;
  content: "";
  position: absolute;
  bottom: 0px;
  left: 42px;
  height: 51%;
  width: 100%;
  border-radius: 0px 6px 10px 0px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#747D80), to(#545D60));
  background: -webkit-linear-gradient(#747D80, #545D60);
  background: -moz-linear-gradient(#747D80, #545D60);
  background: -o-linear-gradient(#747D80, #545D60);
  background: linear-gradient(#747D80, #545D60);
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
.rect:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#545D60), to(#949DA0));
  background: -webkit-linear-gradient(#545D60, #949DA0);
  background: -moz-linear-gradient(#545D60, #949DA0);
  background: -o-linear-gradient(#545D60, #949DA0);
  background: linear-gradient(#545D60, #949DA0);
}
.rect:hover:before {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#545D60), to(#747D80));
  background: -webkit-linear-gradient(#545D60, #747D80);
  background: -moz-linear-gradient(#545D60, #747D80);
  background: -o-linear-gradient(#545D60, #747D80);
  background: linear-gradient(#545D60, #747D80);
}
.rect:hover:after {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#747D80), to(#949DA0));
  background: -webkit-linear-gradient(#747D80, #949DA0);
  background: -moz-linear-gradient(#747D80, #949DA0);
  background: -o-linear-gradient(#747D80, #949DA0);
  background: linear-gradient(#747D80, #949DA0);
}

＆＃13;

<div class="rect"><span>NEXT</span>
</div>

＆＃13;

＆＃13;

＆＃13;