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

Question

对于我的在线游戏 UI，我决定制作 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>

问题在于正确对齐梯度。可以将 渐变背景 添加到 rect，但相同的渐变无法与右侧的三角形正确对齐。
诸如此类的解决方案很有帮助，但不适用于我正在尝试的解决方案： link

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

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

编辑

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

Answer 1

Caution: This is not quite the way you had in mind to achieve this, but in my opinion this is probably the simplest way to achieve it without resorting to SVG or images or complex angle calculations in gradients. Rotating pseudo-elements etc will cause the other side to mismatch because you have a curved side on the right.

这个形状是通过使用两个伪元素实现的，这两个伪元素的大小大约是父元素的一半 (.rect)，将它们向相反的方向倾斜，然后将它们恰好一个放在另一个下面。通过使用伪元素的 left 属性将另一个倾斜的边（左侧）定位在父矩形内，从视图中隐藏。

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

因为 :before 和 :after 伪元素实际上是主要元素的子元素，所以它们上的 hover 实际上意味着父元素上的 hover 。

span 包含文本，并以较高的 z-index 定位，使其位于伪元素之上，从而可见。

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

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

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

Rounded arrow shape with gradient fill

html

css

linear-gradients

css-shapes