Bootstrap 4和css转换旋转

Question

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

https://jsfiddle.net/0kty2fLw/

Answer 1

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

处理此问题的最快方法是在正方形上设置背景色(白色适用于您的示例(以覆盖线条，并确保使用z-index设置线条以位于旋转的正方形后面。或者，如果你需要正方形/菱形是透明的，你可以使用left&右边距以防止重叠。

附带说明一下，您的引导程序结构不正确：.container中不应该有.container。我也会避免使用Bootstrap网格元素来做类似的事情。它为HTML增加了不必要的结构复杂性，而HTML应该更简单。如果你需要这个来适应Bootstrap布局，我只需要在一个全宽的.col中进行整条线/菱形设计，并处理尺寸&独立响应。

Answer 2

已编辑

检查一下。

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

它将保持的响应设计

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