Rounded Arrow Shape With Gradient Fill

For my online game UI, I decided to make Hill Climb Racing (Android Game)'s buttons. This is is what I have presently : The problem lies with aligning the gradient properly. A g

Solution 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.

The shape is achieved by using two pseudo-elements which are about half the size of the parent (.rect), skewing them in opposite directions and then positioning them exactly one below the other. The other skewed side (left hand side) is hidden from view by positioning it inside the parent rectangle using the left property of the pseudo-elements.

The required gradient is assigned to both the parent and the pseudo-elements. For the parent the full gradient is applied as required whereas for the pseudo-elements it is split exactly in half between the the :before and :after elements to make it look as a gradual progression.

Since the :before and :after pseudo-elements are effectively children of the main element, a hover on them effectively means an hover on the parent also.

The span contains the text and is positioned with a higher z-index for it to be above the pseudo-elements and thereby be visible.

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: 20px0px0px20px;
  background: -webkit-gradient(linear, 00, 0100%, 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);
}
.rectspan {
  position: relative;
  z-index: 2;
}
.rect:before {
  background: #545D60;
  content: "";
  position: absolute;
  top: 0px;
  left: 42px;
  height: 51%;
  width: 100%;
  border-radius: 0px10px6px0px;
  background: -webkit-gradient(linear, 00, 0100%, 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: 0px6px10px0px;
  background: -webkit-gradient(linear, 00, 0100%, 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, 00, 0100%, 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, 00, 0100%, 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, 00, 0100%, 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);
}

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