Bootstrap 4 и css преобразуют вращение

Question

Я хочу сделать бриллиант с линиями рядом.Это работает, когда это квадрат, но когда я применяю transform: rotation(45deg); к квадрату, две линии пересекают ромб.

https://jsfiddle.net/0kty2fLw/

Answer 1

CSS-преобразования не влияют на положение любых других элементов.Начальные размеры и позиции всех элементов устанавливаются до применения каких-либо преобразований CSS, затем применяются преобразования CSS, затрагивающие только преобразованные элементы.Это означает, что когда ваш квадрат повернут на 45 градусов, линии на каждой стороне по-прежнему имеют ту же длину, что и до поворота.После преобразования повернутый квадрат теперь стал шире, чем до вращения, поэтому линии перекрывают левую и правую точки вашего «ромба».

Самый быстрый способ справиться с этим - установитьЦвет фона (белый будет работать с вашим примером) на вашем квадрате, чтобы покрыть линии, и убедитесь, что линии установлены с z-index, чтобы идти за повернутый квадрат.В качестве альтернативы, если вам нужно, чтобы квадрат / ромб был прозрачным, вы можете уменьшить ширину линий, используя левые и правые поля, чтобы предотвратить перекрытие.

В качестве примечания, ваша структура Bootstrap неверна:у вас не должно быть .container внутри .container.Я бы также не использовал элементы сетки Bootstrap для чего-то подобного.Это добавляет ненужную структурную сложность HTML, которая должна быть намного более простой.Если вам это нужно, чтобы вписаться в макет Bootstrap, я бы просто сделал весь дизайн линии / ромба внутри одной полной ширины .col и независимо работал бы с размерами и отзывчивостью.

Answer 2

Просто увеличьте левое и правое поле.Вот jsfiddle: https://jsfiddle.net/0kty2fLw/4/

#ligne1{
  margin-right: 35px;
}

#ligne2{
  margin-left: 35px;
}

И удалить col-2 class

<div class="container">
<div class="row ">
  <div class="ligne col my-auto" id="ligne1"></div>
  <div>
    <div class="container">
      <div class="row justify-content-center">
        <div class="square my-auto">
          <div class="circle">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ligne col my-auto" id="ligne2"></div>
</div>

Answer 3

Отредактировано

проверьте это.

#ligne1{
    margin-right: -5vw;
}

#ligne2{
    margin-left: -5vw;
}

Это будет поддерживать адаптивный дизайн