html - 如何仅使用 HTML5/CSS3 制作 Valve Portal 的 "Aperture Labs" Logo ？

Question

我正在尝试重新创建以下 Logo :



这是我到目前为止尝试过的，

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

body {
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

#logo {
  width: 80vmin;
  height: 80vmin;
  background: linear-gradient( to top, #f60 0%, #f60 20%, #222 20%, #222 22%, transparent 22%, transparent 100%);
  border-radius: 50%;
  z-index: 10;
}

.seg {
  width: 80vmin;
  height: 80vmin;
  background: linear-gradient( to top, #f60 0%, #f60 20%, #ddd 20%, #ddd 22%, transparent 22%, transparent 100%);
  border-radius: 50%;
  border: solid #ddd 4px;
}

#seg2 {
  z-index: 12;
  transform: rotate(45deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg4 {
  z-index: 14;
  transform: rotate(135deg);
}

#seg5 {
  z-index: 15;
  transform: rotate(180deg);
}

#seg6 {
  z-index: 16;
  transform: rotate(225deg);
}

#seg7 {
  z-index: 17;
  transform: rotate(270deg);
}

#seg8 {
  z-index: 1;
  transform: rotate(315deg);
}

#seg9 {
  z-index: 8;
  transform: rotate(360deg);
}

#seg1 {
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  z-index: 999;
  background: conic-gradient( at 30% 80%, transparent 0%, transparent 25%, #f60 25%, #f60 50%, transparent 50%);
}

<div id="logo">
  <div class="seg" id="seg2"></div>
  <div class="seg" id="seg3"></div>
  <div class="seg" id="seg4"></div>
  <div class="seg" id="seg5"></div>
  <div class="seg" id="seg6"></div>
  <div class="seg" id="seg7"></div>
  <div class="seg" id="seg8"></div>
  <div class="seg" id="seg9"></div>
</div>

我用类 .seg 制作了一个圆形 div并使用了 linear-gradient制作圆形线段。然后我旋转这些部分以创建光圈，但最后一个部分是障碍。

然后我尝试使用 conic-gradient切断左侧线段的 Angular ，但这只是形成 八 Angular 在中间 :(

这是第二次尝试的代码:

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

body {
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

#logo {
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  z-index: 10;
}

.seg {
  width: 80vmin;
  height: 80vmin;
  background: conic-gradient( at 30% 80%, transparent 0%, transparent 25%, #f60 25%, #f60 37.5%, transparent 37.5%);
  border-radius: 50%;
}

#seg2 {
  z-index: 12;
  transform: rotate(45deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg4 {
  z-index: 14;
  transform: rotate(135deg);
}

#seg5 {
  z-index: 15;
  transform: rotate(180deg);
}

#seg6 {
  z-index: 16;
  transform: rotate(225deg);
}

#seg7 {
  z-index: 17;
  transform: rotate(270deg);
}

#seg8 {
  z-index: 1;
  transform: rotate(315deg);
}

#seg9 {
  z-index: 8;
  transform: rotate(360deg);
}

<div id="logo">
  <div class="seg" id="seg2"></div>
  <div class="seg" id="seg3"></div>
  <div class="seg" id="seg4"></div>
  <div class="seg" id="seg5"></div>
  <div class="seg" id="seg6"></div>
  <div class="seg" id="seg7"></div>
  <div class="seg" id="seg8"></div>
  <div class="seg" id="seg9"></div>
</div>

Answer 1

我将 8 个三 Angular 形作为其他三 Angular 形的子元素，因此我们不需要对每个三 Angular 形应用特定的旋转和位置，因为每个三 Angular 形都相对于它的父元素。

我也用 :before每个 <i> 中的伪元素，因此我们不需要在 html 代码中添加更多元素，我们可以在不变形 Logo 的情况下为三 Angular 形添加额外的变换。

大小是相对于 #logo的font-size值(value)，所以改变它，一切都是相对的。

当你用鼠标悬停它时，我还放置了一个关闭动画。

我不需要隐藏带有其他元素的片段，所以我们可以将它放在任何东西上并且可以正常工作。 (就像我放在这个例子中的渐变一样。)

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(#0FF, #004);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
#logo {
  font-size: 10px;
  height: 20em;
  width: 20em;
  border-radius: 10em;
  position: relative;
  --triangle-size: 4em;
  --triangle-skew: 15deg;
  transition: 2s;
  overflow: hidden;
}
#logo:hover {
  transform: rotate(45deg);
  --triangle-skew: 45deg;
}
#logo i {
  position: absolute;
  transform: rotate(-45deg);
  top: 5.5em;
  left: .5em;
  transition: 2s;
}
#logo i::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: var(--triangle-size) solid #000;
  border-right: var(--triangle-size) solid transparent;
  border-bottom: var(--triangle-size) solid transparent;
  transform: skew(calc(var(--triangle-skew)*-1), var(--triangle-skew));
  transition: 2s;
}
#logo > i {
  top: 9.5em;
  left: -0.5em;
}

<div id="logo">
  <i ><i ><i ><i ><i ><i ><i ><i >
  </i></i></i></i></i></i></i></i>
</div>