html 形状里面有字,html – 创建一个包含文本形状的雪花形状

我正在为冬季在我的网页上创建一个雪花.

我尝试的第一件事是用SVG创建它：

Koch Snowflake Frac

Here is a paragraph that requires word wrap

我无法获得< foreignObject>即使我没有在IE浏览器中支持它.

没有必要支持旧的IE浏览器,但我至少要支持其中的一个.

顶部细小的细节,形状没有关闭.

然后我尝试用CSS创建一个雪花：

.snowflake {

position: absolute;

width: 200px;

display: inline-block;

border-bottom: 10px solid cornflowerblue;

top: 200px;

left: 100px;

background-color: white;

}

.snowflake:before {

position: absolute;

content: "";

display: inline-block;

width: 50px;

border-bottom: 10px solid cornflowerblue;

transform: rotate(45deg);

top: -20px;

}

.snowflake:after {

position: absolute;

content: "";

display: inline-block;

width: 50px;

border-bottom: 10px solid cornflowerblue;

transform: rotate(-45deg);

top: 20px;

}

.smallbranch {

position: absolute;

right: 0px;

display: inline-block;

width: 50px;

border-bottom: 10px solid cornflowerblue;

transform: rotate(45deg);

top: 17px;

box-shadow: -130px -5px 0px 0px cornflowerblue;

}

.smallbranch:before {

position: absolute;

content: "";

display: inline-block;

width: 50px;

border-bottom: 10px solid cornflowerblue;

transform: rotate(90deg);

top: -22px;

left: -22px;

box-shadow: 130px -5px 0px 0px cornflowerblue;

}

.circle {

position: absolute;

left: 50%;

width: 50px;

height: 50px;

border-radius: 50%;

border: 5px solid cornflowerblue;

background-color: white;

transform: translate(-50%, -50%);

}

.circle:before {

position: absolute;

content: "";

display: inline-block;

width: 50px;

border-bottom: 10px solid cornflowerblue;

transform: rotate(90deg);

top: -52px;

left: 20px;

transform: rotate(-45deg);

}

.circle:after {

position: absolute;

content: "";

display: inline-block;

width: 50px;

border-bottom: 10px solid cornflowerblue;

transform: rotate(90deg);

top: 102px;

left: 20px;

transform: rotate(45deg);

}

.branch {

position: absolute;

display: inline-block;

height: 200px;

border-right: 10px solid cornflowerblue;

left: 50%;

top: -100px;

}

Text in here

这是我最好的尝试CSS.

现在这里显示文本,但不在一行.我的想法是在网站上的标志或按钮中使用.所以我不认为我将需要线条功能的形状,但它将是一个加号,如果它有.

我想要创建的形状：

TL; DR

我想要的是在形状中间有文字的雪花.

我要求一个解决方案,文本可以是任何长度,仍然在形状.

只要形状是中心的文字,就可以创建与我所尝试的形状完全相同的形状.我不知道文本将要多长时间,所以形状必须包含文本.