html - 在 CSS 中创建 Logo 时出现问题？

Question

我正在尝试使用 HTML 和 CSS 重新创建我的 Logo ，作为练习以了解有关旋转、过渡和动画的更多信息；我发现它在定位方面相当乏味，并且觉得我可能会以错误的方式去做。这是我的 Logo 的基本表示:

到目前为止，HTML 和 CSS 非常简单，但正如我所说，它看起来非常乏味，因为对 div< 的高度或位置进行任何调整 元素迫使我到处移动东西。我更希望有一个父 div 元素， Logo 适合并根据父元素调整大小/重新定位。

我认为 position: relative 可以完成重新定位，但我不确定使用百分比对 width 和 height 的效果如何> 涉及此过程的属性。

这是我当前的代码；它是不完整的，但我想在它走得太远并最终不得不重写整个事情之前寻求更有经验的建议。

.box {
  width: 100px;
  height: 100px;
  background-color: #3CF;
  transform: rotatez(45deg);
  margin: auto;
  position: fixed;
  top: 50px;
  left: 500px;
}
.astick {
  width: 3px;
  height: 250px;
  background-color: #FC0;
  transform: rotatez(45deg);
  position: fixed;
  top: -8px;
  left: 460px;
}
.bstick {
  width: 3px;
  height: 250px;
  background-color: #8C3;
  transform: rotatez(-45deg);
  position: fixed;
  top: -45px;
  left: 460px;
}

<div class="logo">
  <div class="box"></div>
  <div class="astick"></div>
  <div class="bstick"></div>
  <div class="cstick"></div>
</div>

---

我想知道是否有更智能或更有效的方法来完成此任务。当我说更有效率时，我的意思是维护和重用很简单并且花费的时间最少。

此外，为了获得良好的过渡效果而对元素的大小进行动画处理会出现什么样的问题？我相信仅修改尺寸会导致过渡期间的定位问题，但我认为我可能无法理解所有潜在问题。

---

编辑:使用 SVG

根据已经提供的评论和答案，我决定 SVG 将是一个很好的决定；我将悬赏 50 给写出关于 SVG 的非常详细的答案并回答了我上面提到的所有问题的人。

• 定位
• 缩放
• 动画
• 使用 CSS 设计样式
• 等等

Answer 1

我会这样做:我为绿线使用了一个 div，为金线使用了一个 ::before，为蓝色方 block 使用了一个 ::after。

.logo {
  position:relative;
  margin-top:50px;
  width: 250px;
  height: 250px;
  border-top: 4px solid #8c3;
  transform:rotate(45deg) scale(.9,.9);
  box-sizing:border-box;
}
.logo::after,.logo::before{
  content:"";
  display:block;
  position:absolute;
  top:-100px;
  width:100px;
  box-sizing:border-box;
}

.logo::before{
  right:0;
  height:100%;
  border-left:4px solid #fc0;
}

.logo::after{
  height:100px;
  background-color:#3cf;
  right:0;
  top:-100px;
  border-bottom:4px solid #8c3;
  border-left:4px solid #fc0;
}

<div class="logo"></div>

希望对你有帮助。

更新

但是，如果您考虑使用 SVG，我会这样做:

在这种情况下，SVG 具有在 CSS 中声明的宽度。

line{stroke-width:4px}
svg{border:1px solid; width:90vh}

<svg viewBox="0 0 250 215">
  <g transform="rotate(45)">
  <rect x="150" y="-100" width="100" height="100" fill="#3cf" />
  <line stroke="#8c3"  x2="250" />
  <line stroke="#fc0" x1="150" y1="-100" x2="150" y2="150" />
  </g>
</svg>

缩放:如果您的 SVG 没有声明 width 或 height，则在使用 SVG 时，它将占用所有可用宽度。因此，您可以将其放入所需宽度的容器中。如果容器将缩放 SVG 将立即采用相同的大小。

定位:SVG 元素可以像任何其他 HTML 内联 元素一样定位

样式 在 CSS 中，我设置了线条的 stroke-width。如果您需要更改颜色，也可以在 CSS 中完成。在这种情况下，我使用了 SVG 变换，但我也可以在 CSS 中完成:g{transform: rotate(45deg);}

动画 你可以使用 SMIL animations 为 SVG 元素设置动画，使用 CSS 动画和使用 Javascript 动画。如果您想为您的日志制作动画，请提出一个问题，说明您希望如何为您的 SVG 制作动画。