Проблемы создания логотипа в CSS?

Question

Я пытаюсь воссоздать свой логотип с HTML и CSS в качестве упражнения, чтобы узнать больше о поворотах, переходах и анимации;Я нахожу это довольно утомительным в отношении позиционирования и чувствую, что я могу поступить неправильно.Вот базовое представление моего логотипа:

До сих пор HTML и CSS довольно просты, но, как я уже сказалкажется очень утомительным, так как любое изменение высоты или положения элементов div заставляет меня всюду перемещать вещи.Я бы предпочел иметь родительский элемент div, в который помещается логотип и изменяющий размер / репозиционировать на основе родительского элемента.

Я думал, что 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 для золотой линии и ::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>

Надеюсь, это поможет.

update

Однако, если 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, если ваш SVG не имеет объявленного width или height, он будет принимать всю доступную ширину,Таким образом, вы можете поместить его в контейнер нужной ширины.Если контейнер будет масштабироваться, SVG сразу примет тот же размер.

Позиционирование: Элемент SVG можно позиционировать, как и любой другой элемент HTML inline *

Стиль В CSS я установил stroke-width линий.Если вам нужно изменить цвета, это также можно сделать в CSS.В этом случае я использовал SVG-преобразования, но я мог бы сделать это и в CSS: g{transform: rotate(45deg);}

Анимации Вы можете анимировать SVG-элементы с помощью SMIL-анимаций , с CSS-анимацией и с анимацией Javascript.В случае, если вы хотите анимировать свой журнал, задайте вопрос, определяющий, как бы вы хотели анимировать свой SVG.

Answer 2

На самом деле три фактора влияют на функцию поворота: начальную точку, размер страницы, ширину объекта, длину, а также направление.Для SVG лучше прочитать об этом здесь: https://svgontheweb.com/ и https://css -tricks.com / transforms-on-svg-elements / https://www.jotform.com/blog/better-positioning-and-transforming-with-nested-svgs/

Здеськак это использовать:

 

 <svg width="450" height="250" style="background: gray">
  <g transform="rotate(45)">
  <rect x="150" y="-80" width="80" height="80" fill="#3cf" />
  <line stroke="#fc0"  x1="170"  x2="70"  />
  
  <line stroke="#fc0" x1="150" y1="-80" x2="150" y2="150" />
   <line stroke="#fc0" x1="70" y1="0" x2="70" y2="70" />
  
  </g>
</svg>

.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: 90px;
  background-color: #FC0;
  transform: rotatez(-45deg);
  position: fixed;
  top: 23px;
  left: 447px;
}

.astick1 {
  width: 3px;
  height: 300px;
  background-color: #FC0;
  transform: rotatez(45deg);
  position: fixed;
  top: -10px;
  left: 310px;
}

<div class="logo" style=" position: center;">
  <div class="box"></div>
  <div class="astick"></div>
  <div class="bstick"></div>
  <div class="cstick"></div>
   <div class="astick1"></div
</div>