如何使用CSS制作带有边框卷曲的圆形徽章？

Question

是否可能仅使用CSS使徽章像下面的图片一样弯曲？

文本必须保持在卷曲和渐变下方，并且文本应该是可选择的。

JS fiddle: http://jsfiddle.net/jitendravyas/vVeME/1/

JS fiddle：{{link1：http://jsfiddle.net/jitendravyas/vVeME/1/}}

（注：该链接为编程相关内容）

- Jitendra Vyas

---

你尝试过什么？哪些方面出了问题或者出错了？你遇到了哪些困难或正在遇到中？ - David Thomas

你的意思是仅使用CSS（即不使用background-image）吗？ - mal-wan

mwan - 用纯CSS实现是可以的。 - Jitendra Vyas

如果你能让它工作，那将是一些史诗级的CSS。 - abney317

可能使用CSS遮罩，但我认为不值得。http://www.webkit.org/blog/181/css-masks/ 另外，将你的边框半径改为50%，以创建一个圆形。 - Mohsen

CSS不是绘图程序，也不应该被当作绘图程序来对待。 - Rob

Answer 1

这是我能做到的最好的了 :P

http://jsfiddle.net/ree2Z/

当然，它只能在白色背景上正常工作，但接近目标。XD

- Joseph Marikle

---

哈哈，谢谢@Jleagle，但我相信它可以做得更好。:P - Joseph Marikle