带渐变的圆形箭头

Question

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

Answer 1

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

我们可以使用 SVG 的 path 元素创建一个类似形状的指向箭头，并用 linearGradient.

创建的渐变填充它

只有一个属性 d 用于定义 path 元素中的形状。此属性本身包含许多短命令和这些命令运行所需的几个参数。

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

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

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

带渐变的圆形箭头

Circular arrows with gradient

css

css-shapes