Bootstrap 4 and css transform rotation - css

Question

I want to make a diamond with lines beside. It works when it's a square, but when I apply transform: rotation(45deg); on the square, the two lines are crossing the diamond.
https://jsfiddle.net/0kty2fLw/

Answer 1

CSS transforms don't affect the position of any other elements. Initial sizes and positions of all elements are set before any CSS transforms are applied, then CSS transforms are applied, affecting only the transformed elements. This means that when your square is rotated 45 degrees, the lines on each side are still the same length they were before the rotation. After the transform, the rotated square is now wider than it was before the rotation, so the lines are overlapping the left & right points of your 'diamond'.
The quickest way to deal with this is to set a background colour (white would work with your example) on your square to cover the lines, and ensure the lines are set with z-index to go behind the rotated square. Alternatively, if you need the square/diamond to be transparent, you could reduce the width of the lines using the left & right margins to prevent the overlap.
As a side note, your Bootstrap structure is not correct: you shouldn't have a .container inside a .container. I would also avoid using Bootstrap grid elements for something like this. It adds unnecessary structural complexity to HTML that should be much more straightforward. If you need this to fit inside a Bootstrap layout, I'd just do the whole line / diamond design inside one full width .col and deal with the sizing & responsiveness independently.

Answer 2

Edited
check this.
#ligne1{
margin-right: -5vw;
}
#ligne2{
margin-left: -5vw;
}
It'll maintain the responsive design

Answer 3

Just increase left and right margin.
Here is jsfiddle: https://jsfiddle.net/0kty2fLw/4/
#ligne1{
margin-right: 35px;
}
#ligne2{
margin-left: 35px;
}
And remove 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>