带有文字的HTML + CSS圈子

Question

是否可以使用HTML和CSS创建此圈子？

我可以使用svg，但我想我不能在它周围创建文本。

Answer 1

以下是一个示例:: http://jsfiddle.net/t7rjj1hn/

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/>
    </defs>
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/>
    <g font-family="Arial" font-size="18px">
        <text text-anchor="middle">
            <textPath xlink:href="#text_0_path" startOffset="50%">Test Text</textPath>
        </text>

    </g>
</svg>