グラデーション付き円形の矢

Question

私は境界線で作ろうとしましたが、グラデーションはできません。たぶん私は4つの部門を作ってそれをそうすることができますか？

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>