Bootstrap 4和css变换旋转答案

【问题标题】：Bootstrap 4 and css transform rotationBootstrap 4和css变换旋转
【发布时间】：2018-12-17 08:13:14
【问题描述】：

我想制作一颗旁边有线条的钻石。当它是正方形时它可以工作，但是当我在正方形上应用transform: rotation(45deg); 时，两条线穿过菱形。

【问题讨论】：

【解决方案1】：

CSS 变换不会影响任何其他元素的位置。在应用任何 CSS 变换之前设置所有元素的初始大小和位置，然后应用 CSS 变换，仅影响变换后的元素。这意味着当您的正方形旋转 45 度时，每边的线条仍然与旋转前的长度相同。变换后，旋转后的正方形现在比旋转前更宽，因此线条与“钻石”的左右点重叠。

解决此问题的最快方法是在您的正方形上设置背景颜色（白色适用于您的示例）以覆盖线条，并确保使用z-index 设置线条以位于旋转正方形的后面。或者，如果您需要正方形/菱形透明，您可以使用左右边距减小线条的宽度以防止重叠。

附带说明，您的 Bootstrap 结构不正确：您不应该在 .container 中包含 .container。我也会避免使用 Bootstrap 网格元素来做这样的事情。它给 HTML 增加了不必要的结构复杂性，这应该更简单。如果您需要将其放入 Bootstrap 布局中，我只需在一个全宽 .col 内进行整条线/菱形设计，并独立处理尺寸和响应性。

【讨论】：

感谢您非常完整且内容丰富的回答。我要试试你的解决方案。除了 bootstrap 之外，您还有什么建议？只需使用 flexbox 吗？（我希望这是响应式的）
一般来说使用 Bootstrap 没有问题，但没有必要（或者说真的是一个好主意）为这样的事情使用结构网格元素。我会用更简单的 HTML 方法来做，比如：jsfiddle.net/xb9a8mk5/1。如果您希望正方形具有响应性，您可以使用媒体查询来调整它和线宽。
谢谢，您的代码更易读、更简单。我要研究你的代码，因为我不习惯做 CSS lol。

【解决方案2】：

已编辑

检查一下。

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

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

它将保持响应式设计

【讨论】：

我想要菱形旁边的线条（一条线，菱形，一条线）。但是正如你所看到的，当我将正方形变成菱形时，线条有点穿过菱形。
你是什么意思，旁边？。像这样` || ` ?
不，像这样--
非常感谢 Yoarthur，但效果不太好，t-jam 解决方案有效

【解决方案3】：

只需增加左右边距。这是jsfiddle：https://jsfiddle.net/0kty2fLw/4/

#ligne1{
  margin-right: 35px;
}

#ligne2{
  margin-left: 35px;
}

并删除 col-2 类

<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>

【讨论】：

没有响应
谢谢！但效果不是很好，t-jam 解决方案正在运行