帶漸變的圓形箭頭

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>