html – 创建一个包含文本形状的雪花形状

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

我尝试的第一件事是用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

Full-Screen 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;

Full-Screen JSFiddle Demo

原文地址：https://www.jb51.cc/html/229847.html

html – 创建一个包含文本形状的雪花形状

解决方法

相关推荐