与渐变填充的圆形箭头形状 [英] Rounded arrow shape with gradient fill

问题描述

对于我的在线游戏用户界面，我决定使用 Hill Climb Racing（Android游戏）的按钮。这是我目前的：

  body {color：white; font-family：影响，幻想; font-size：40px; line-height：100px; text-align：center;}。rect {height：100px; width：280px;背景：＃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 中添加渐变背景，但相同的渐变与右侧的三角形不能正确对齐。

这个解决方案是有帮助的，但不适用于我试图：
链接

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

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

EDIT

此外，悬停时，渐变上下颠倒，即旋转180度。这部分我可以创建，但在 rect 和之前的<\\ c $ c>渐​​变仍然是一个问题。

解决方案

注意：这不是你想象的那样，但在我看来，这可能是最简单的方式来实现它，而不诉诸SVG或图像或梯度中的复杂角度计算。旋转伪元素等会导致另一边不匹配，因为您在右边有一个弯曲的边。

使用大约为父代（ .rect ）大小一半的两个伪元素，将它们向相反方向倾斜，然后将它们恰好一个放在另一个下面。通过使用伪元素的 left 属性将其定位在父矩形内部，隐藏其他歪斜的边（左手边）。

必需的渐变被分配给父元素和伪元素。对于父元素，根据需要应用完整渐变，而对于伪元素，它在：before 和：after

由于：之前 code>：after 伪元素实际上是主要元素的子元素，它们上的 hover 有效地表示 hover 。

span 包含文本，位于较高的z-索引，元素，从而可见。

  body {color：white; font-family：影响，幻想; font-size：40px; line-height：100px; text-align：center;}。rect {height：100px; width：225px;位置：相对; border-radius：20px 0px 0px 20px;背景：-webkit梯度（线性，0 0，0 100％，从（＃949DA0）到（＃545D60））;背景：-webkit-linear-gradient（＃949DA0，＃545D60）; background：-moz-linear-gradient（＃949DA0，＃545D60）;背景：-o-线性梯度（＃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;身高：51％宽度：100％; border-radius：0px 10px 6px 0px;背景：-webkit梯度（线性，0 0，0 100％，从（＃949DA0）到（＃747D80））;背景：-webkit-linear-gradient（＃949DA0，＃747D80）;背景：-moz-线性梯度（＃949DA0，＃747D80）;背景：-o-线性梯度（＃949DA0，＃747D80）;背景：线性梯度（＃949DA0，＃747D80）; -webkit-transform：skew（45deg）; -moz-transform：skew（45deg）; transform：skew（45deg）;}。rect：after {background：＃545D60; content：; position：absolute; bottom：0px; left：42px;身高：51％宽度：100％; border-radius：0px 6px 10px 0px;背景：-webkit梯度（线性，0 0，0 100％，从（＃747D80）到（＃545D60））; background：-webkit-linear-gradient（＃747D80，＃545D60）;背景：-moz-线性梯度（＃747D80，＃545D60）;背景：-o-线性梯度（＃747D80，＃545D60）;背景：线性梯度（＃747D80，＃545D60）; -webkit-transform：skew（-45deg）; -moz-transform：skew（-45deg）; transform（-45deg）;} rect：hover {background：-webkit-gradient（linear，0 0，0 100％，from（＃545D60），to（＃949DA0））;背景：-webkit-linear-gradient（＃545D60，＃949DA0）;背景：-moz-线性梯度（＃545D60，＃949DA0）;背景：-o-线性梯度（＃545D60，＃949DA0）;背景：线性渐变（＃545D60，＃949DA0）;}。rect：hover：before {background：-webkit- gradient（linear，0 0，0 100％，from（＃545D60），to（＃747D80））;背景：-webkit-linear-gradient（＃545D60，＃747D80）; background：-moz-linear-gradient（＃545D60，＃747D80）;背景：-o-线性梯度（＃545D60，＃747D80）;背景：线性渐变（＃545D60，＃747D80）;}。rect：hover：after {background：-webkit-gradient（linear，0 0，0 100％，from（＃747D80），to（＃949DA0））;背景：-webkit-linear-gradient（＃747D80，＃949DA0）;背景：-moz-线性梯度（＃747D80，＃949DA0）;背景：-o-线性梯度（＃747D80，＃949DA0）; background：linear-gradient（＃747D80，＃949DA0）;}  

 < div class =rect>< span> NEXT< / span>< / div>  
 
For my online game UI, I decided to make Hill Climb Racing (Android Game)'s buttons. This is is what I have presently : 



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>







The problem lies with aligning the gradient properly. A gradient background could be added to rect, but the same gradient doesn't align properly with the triangle on the right.

Solutions such as this one are helpful, but don't apply to what I am trying :
link

Also, can we create a responsive shape with gradient background?

Note : this is not a duplicate, its a completely different question.

EDIT

Also, on hover, the gradient becomes upside down, ie rotates 180 deg. This part I can create, but aligning the gradients of rect and before is still a problem.
解决方案

  
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: 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>





                        
这篇关于与渐变填充的圆形箭头形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！