我正在为冬季在我的网页上创建一个雪花.
我尝试的第一件事是用SVG创建它：
<h3>Koch Snowflake Frac</h3> <svg viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg"> <polyline stroke="cornflowerblue" stroke-width="2" fill="rgba(255,255,0.5)" points="55 5,60 10,65 10,65 15,70 20,75 20,80 15,85 20,90 20,85 25,90 30,80 30,75 35,80 40,90 40,85 45,90 50,85 50,80 55,75 50,70 50,65 55,65 60,60 60,55 65,50 60,45 60,45 55,40 50,35 50,30 55,25 50,20 50,25 45,20 40,30 40,35 35,30 30,20 30,25 25,20 20,25 20,30 15,35 20,40 20,45 15,45 10,50 10,55 5" /> <foreignObject x="0" y="0" requiredExtensions="http://www.w3.org/1999/xhtml"> <body xmlns="http://www.w3.org/1999/xhtml"> <p>Here is a paragraph that requires word wrap</p> </body> </foreignObject> </svg>
我无法获得< 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;
}
<div class="snowflake"> <div class="branch"></div> <div class="smallbranch"></div> <div class="circle">Text in here</div> </div>
这是我最好的尝试CSS.
现在这里显示文本,但不在一行.我的想法是在网站上的标志或按钮中使用.所以我不认为我将需要线条功能的形状,但它将是一个加号,如果它有.
TL; DR
我想要的是在形状中间有文字的雪花.
我要求一个解决方案,文本可以是任何长度,仍然在形状.
只要形状是中心的文字,就可以创建与我所尝试的形状完全相同的形状.我不知道文本将要多长时间,所以形状必须包含文本.
解决方法
Play with this demo
这实际上是一个非常有趣的问题,并提出一个答案并不容易.
这个问题要求做一个形状(在这种情况下是一个雪花),这将缩放以适应它内部的文本.我的第一个建议是使用图像,不要尝试使用CSS创建形状.图像比较简单,可以有一个CSS形状的细节.
所以,让我们展示如何实现这一点.
首先,由于您希望将元素缩放以适应字体,我们需要使元素显示：inline-block.这将使它只是与内容一样宽,不像块,它将使它像父母一样宽,仍然可以设置高度(你不能做内联).
接下来,我们需要使高度与宽度相同的元素.幸运的是,CSS中有一个技巧,可以让你做到这一点.元素的填充是根据它的宽度来计算的,所以如果将padding-bottom(或padding-top)设置为100％,那么它的宽度与height的宽度相同(See this excellent SO answer for further info).
之后,这只是一个把雪花中的文字置于中心位置的问题,这可能需要花费一点时间来适应你的字体系列.
如果你想要jsfiddle的代码：
JSFiddle Demo
在Chrome,FireFox,IE和Safari中进行测试.某些font-family可能需要进行微调
.snowflake{
display:inline-block;
background:url("http://i.imgur.com/4M9MH1Q.png") scroll no-repeat center/contain;
}
/*This is for setting the height the same as the width,a 1:1 ratio. more info http://www.mademyday.de/css-height-equals-width-with-pure-css.html#outer_wrap */
.snowflake:after{
content: "";
display: block;
padding-top: 100%;
}
.snowflake span{
display:inline-block;
-webkit-transform: translateY(110%);
-ms-transform: translateY(110%);
transform: translateY(110%);
width:100%;
text-align:center;
padding-top:20%;
}
/*This part is ugly,but it is required to work in chrome or IE,you may have to change the char for different font types*/
.snowflake span:before,.snowflake span:after{
content:"aaa";
visibility:hidden;
opacity:0;
}
Font-size 12pt:
<div class="snowflake" style="font-size:12pt;">
<span>It's Snowing!</span>
</div>
Font-size 24pt:
<div class="snowflake" style="font-size:24pt;">
<span>It's Snowing!</span>
</div>
Font-size 48pt:
<div class="snowflake" style="font-size:48pt;">
<span>It's Snowing!</span>
</div>
编辑：这个解决方案比较漂亮,但在Chrome或IE中不起作用
.snowflake{
display:inline-block;
background:url("http://i.imgur.com/4M9MH1Q.png") scroll no-repeat center/contain;
}
/*This is for setting the height the same as the width,a 1:1 ratio. more info http://www.mademyday.de/css-height-equals-width-with-pure-css.html#outer_wrap */
.snowflake:after{
content: "";
display: block;
padding-top: 100%;
}
.snowflake span{
display:inline-block;
transform: translateY(90%);
padding:20%;
}
Font-size 12pt: <div class="snowflake" style="font-size:12pt;"> <span>It's Snowing!</span> </div> Font-size 24pt: <div class="snowflake" style="font-size:24pt;"> <span>It's Snowing!</span> </div> Font-size 48pt: <div class="snowflake" style="font-size:48pt;"> <span>It's Snowing!</span> </div>
这个工作的主要条件是：
.snowflake必须显示：inline-block;
