带有渐变的圆形箭头

Question

我尝试用边框制作它，但渐变使它变得不可能。也许我可以制作四个div并让它像那样？

Answer 1

CSS可能不是创建此类形状的最佳方式。你应该使用SVG。

我们可以使用SVG的path元素创建一个类似于形状的箭头，并使用linearGradient创建的渐变填充它。

只有一个属性d用于定义path元素中的形状。该属性本身包含许多短命令和很少的参数，这些命令是这些命令工作所必需的。

Here是有关SVG路径的详细信息：

＆＃13;

＆＃13;

body {
  text-align: center;
  background: #333;
  margin: 20px;
}

＆＃13;

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="#212121"></stop>
      <stop offset="1" stop-color="#a7a7a7"></stop>
    </linearGradient>
    <path id="arrow" x="0" y="0" d="M0,200
                                    A200,200 0, 0, 1, 200,0
                                    L225,25
                                    L200,50
                                    A150,150, 0, 0, 0 50,200
                                    L25,175" fill="url(#gradient)" />
  </defs>

  <use xlink:href="#arrow" transform="translate(0,400) rotate(270)"></use>
  <use xlink:href="#arrow" transform="translate(400,400) rotate(180)"></use>
  <use xlink:href="#arrow" transform="translate(400,0) rotate(90)"></use>
  <use xlink:href="#arrow"></use>

</svg>

＆＃13;

＆＃13;

＆＃13;