Q
带渐变的圆形箭头
0
A
回答
2
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>
+0
谢谢穆罕默德:) – RaShe
+0
@RaShe欢迎您) –
相关问题
- 1. CSS3带渐变的箭头
- 2. 三角形箭头的css渐变
- 3. 圆形箭头与CSS
- 4. 渐变色圆形矩形
- 5. CSS3中的圆形渐变
- 6. Google maps api圆形渐变?
- 7. GDIPlus渐变沿圆形GraphicsPath
- 8. 椭圆形背景渐变
- 9. 圆形渐变 - TeeChart - MonoAndroid
- 10. 圆形渐变和WPF
- 11. 将箭头绘制到圆形
- 12. 创建动画渐变箭头
- 13. 使用渐变重叠CSS 3箭头
- 14. ggplot2带颜色渐变的圆环图
- 15. Python成像库(PIL)绘图 - 带有渐变的圆角矩形
- 16. 带有渐变填充的XML圆形Android
- 17. 石英:无法创建带渐变填充的圆角矩形
- 18. 圆锥渐变圆
- 19. 只有javascript的圆形渐变
- 20. 放射渐变的圆角矩形
- 21. 圆形进度条中的渐变
- 22. 圆柱形外观UIView中的渐变
- 23. 如何使这个箭头变圆?
- 24. Android圆形渐变Alpha蒙版
- 25. 使用“椭圆形”渐变为IE-9
- 26. 如何绘制圆形渐变?
- 27. 渐变圆形边框和显示:块
- 28. 带有渐变和箭头的CSS动态大小按钮的最佳做法
- 29. 使用重复渐变和混合模式创建带CSS的箭头背景
- 30. Unslider圆点和箭头
你有什么已经尝试过? – Jer
试图使填充两个背景,所以第二个背景将像一个边框,但渐变不像这样:) – RaShe
我想也许我可以使4斜线divs – RaShe