引导4和css变换旋转

我想做一个旁边有线条的钻石。当它是正方形时，它工作，但当我应用<代码>变换：旋转（45度）

---

编辑

看看这个

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

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

---

它将保持响应性设计

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

处理此问题的最快方法是在正方形上设置背景色（白色适用于您的示例），以覆盖线条，并确保线条设置为

z-index

，位于旋转的正方形后面。或者，如果需要正方形/菱形透明，可以使用左右边距减小线条的宽度，以防止重叠

---

作为补充说明，您的引导结构不正确：您不应该在

.container

中有

.container

。我也会避免为类似的事情使用引导网格元素。它给HTML增加了不必要的结构复杂性，而HTML应该更简单。如果您需要将其放入引导布局中，我只需在一个全宽

.col

中进行整行/菱形设计，并独立处理大小和响应性。

只需增加左右边距即可。 以下是JSFIDLE：

并删除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解决方案起作用了，没有反应谢谢！但它并没有很好地发挥作用，t-jam解决方案正在为您提供非常完整和信息丰富的答案。我要试试你的解决办法。除了引导，你还有什么建议？简单地使用flexbox？（我希望这是响应性的）一般来说使用引导没有问题，但是没有必要（或者说真的是个好主意）为类似的东西使用结构网格元素。我会使用一种更简单的HTML方法，类似这样的方法：。如果您希望正方形具有响应性，您可以通过媒体查询调整其响应性和线宽。谢谢，您的代码可读性和简单性更高。我要学习你的代码，因为我不习惯做CSS lol。

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