我想制作一个旁边有线条的钻石。它在正方形时有效，但当我在正方形上应用 transform: rotation(45deg); 时，两条线穿过菱形。
最佳答案
CSS 变换不会影响任何其他元素的位置。在应用任何 CSS 变换之前设置所有元素的初始大小和位置，然后应用 CSS 变换，仅影响变换后的元素。这意味着当你的正方形旋转 45 度时，每边的线仍然是旋转前的长度。变换后，旋转后的正方形现在比旋转前更宽，因此线条与“菱形”的左右点重叠。
处理此问题的最快方法是在正方形上设置背景颜色(白色适用于您的示例)以覆盖线条，并确保线条使用 z-index 设置为走到旋转的正方形后面。或者，如果您需要正方形/菱形是透明的，您可以使用左右边距来减少线条的宽度以防止重叠。
附带说明一下，您的 Bootstrap 结构不正确:您不应该在 .container 中包含 .container。我也会避免使用 Bootstrap 网格元素来做这样的事情。它给 HTML 增加了不必要的结构复杂性，而 HTML 应该更直接。如果您需要将其放入 Bootstrap 布局中，我只需在一个全宽度 .col 中进行整条线/菱形设计，并独立处理尺寸和响应能力。
关于css - Bootstrap 4 和 css 变换旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53807486/