带渐变的圆形箭头

我试图用边框制作它，但渐变使它变得不可能。也许我可以制作四个div并制作它？带渐变的圆形箭头

来源

2017-02-13 RaShe

你有什么已经尝试过？ – Jer

试图使填充两个背景，所以第二个背景将像一个边框，但渐变不像这样:) – RaShe

我想也许我可以使4斜线divs – RaShe

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>

来源

2017-02-13 12:42:25

谢谢穆罕默德:) – RaShe

@RaShe欢迎您） –

带渐变的圆形箭头

回答

相关问题