Как сделать так, чтобы Valve Portal «Aperture Labs» получала go, используя только HTML5 / CSS3?

Question

Я пытаюсь воссоздать следующее lo go:

Вот что я пробовал до сих пор,

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 и использовал linear-gradient для создания круглых сегментов. Затем я повернул эти сегменты, чтобы создать апертуру, но последний сегмент является препятствием.

Затем я попытался использовать conic-gradient, чтобы отрезать углы сегментов слева, но это просто образует восьмиугольник в середине: (

Вот код 2 ^и Попытка:

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 треугольников как дочерние друг от друга, поэтому нам не нужно применять специфические c повороты и положения к каждому, так как каждый относительно своего родителя.

Я также используйте :before псевдоэлемент внутри каждого <i>, поэтому нам не нужно больше элементов в коде html, и мы можем добавить дополнительное преобразование в треугольники, не деформируя lo go.

. размер относительно значения #logo font-size, поэтому измените его, и все относительно.

Я также добавляю закрывающую анимацию, когда вы наводите мышью.

I не нужно скрывать части с другими элементами, поэтому мы можем поместить их поверх чего угодно и просто работать. (как градиент, который я положил на этот пример.)

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>

Answer 2

Не знаю, поможет ли это, но я бы порекомендовал использовать <svg> для выполнения задачи.