个人中心
gpt4 book ai didi

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

转载 作者：技术小花猫 更新时间：2023-10-29 12:37:51 33 4
gpt4 key购买 nike

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

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

enter image description here 

<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,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>

我无法让 工作，即使我这样做了，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 的最佳尝试。
现在这里显示了文本，但它不在一行中。我的想法是在 Logo 或网页上的按钮中使用它。所以我认为我不需要在形状上使用换行功能，但如果有的话那就更好了。

我想创建的形状:
enter image description here

长话短说
我想要的是形状中间有文字的雪花。
我正在寻求一种解决方案，其中文本可以是任意长度但仍位于形状内。
您不必创建与我尝试过的完全相同的形状，只要形状是中心有文字的雪花就可以了。我不知道文本有多长，所以形状必须包含文本。

最佳答案

Play with this demo

这其实是个挺有意思的问题，想出答案也不容易。

问题要求制作一个形状(在本例中为雪花)，该形状会缩放以适合其中的文本。我的第一个建议是使用图像，而不是尝试使用 CSS 创建形状。图像更容易制作比例，并且可以比 CSS 形状具有更多细节。

那么，让我们展示一下我们如何实现这一目标。

首先，由于您希望元素缩放以适合字体，我们需要使元素display:inline-block。这将使它只和它的内容一样宽，不像 block 那样会使它和它的父级一样宽，并且仍然能够设置高度(你不能用 inline)。

接下来，我们需要使元素的高度与宽度相同。幸运的是，CSS 中有一个技巧可以让您做到这一点。元素的填充是根据它的宽度计算的，所以如果你将填充底部(或填充顶部)设置为 100%，它将具有与高度相同的宽度。(See this excellent SO answer for further info)。

在此之后，只需将雪花中的文本居中即可，这可能需要花一些时间调整值以适合您的字体系列。

如果你想要带有代码的 jsfiddle: JSFiddle Demo

Full-Screen JSFiddle Demo

已在 Chrome、FireFox、IE 和 Safari 中测试。某些字体系列可能需要稍作调整

.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 必须是 display:inline-block;

Full-Screen JSFiddle Demo

关于html - 创建一个包含形状文本的雪花形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33264825/

33 4 0
文章推荐： linux - 如何在 Tegra Ventana 开发板上启动(嵌入式)Linux？
文章推荐： c++ - 使用用较新版本的 g++ 编译的共享对象
文章推荐： javascript - Linux OpenOffice 自动化
文章推荐： linux - 是否可以从命令行设置 setsockopt()
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com