How to close the gap between two rotated rectangles forming a V?

June 7, 2022

So there are these two rotated rectangles forming a V:

div {
  position: relative;
  left: 100px;
  display: inline-block;
  margin-left: 100px;
}
div::before {
  content: '';
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: bottom right;
  width: 20px;
  height: 100px;
  background: red;
}
div::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
  transform-origin: bottom left;
  width: 20px;
  height: 100px;
  background: red;
}

<div></div>

Now how to close the gap between them? Frist I thought the key would be transform-origin. But no matter what is set there, it can’t result in a isosceles V without a gap.

>Solution :

If you’re already using transforms, you could add a translate to each and just offset them till they cross over

div {
  position: relative;
  left: 100px;
  display: inline-block;
  margin-left: 100px;
}

div::before {
  content: '';
  position: absolute;
  transform: translate(4px) rotate(-45deg);
  transform-origin: bottom right;
  width: 20px;
  height: 100px;
  background: red;
}

div::after {
  content: '';
  position: absolute;
  transform: translate(-4px) rotate(45deg);
  transform-origin: bottom left;
  width: 20px;
  height: 100px;
  background: red;
}