如何缩小形成 V 形的两个旋转矩形之间的间隙？

Question

所以这两个旋转的矩形形成了一个 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>

现在如何缩小它们之间的差距？首先我认为关键是transform-origin。但是无论那里设置什么，都不能产生一个没有间隙的等腰V。

Answer 1

如果您已经在使用变换，则可以为每个变换添加一个平移，然后将它们偏移直到它们交叉

html {
  font-size: 16px;
}

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

div::before {
  content: '';
  position: absolute;
  transform: translateX(0.523em) rotate(-45deg);
  transform-origin: bottom;
  width: 1.25rem;
  height: 6.25rem;
  background: blue;
  border: 2px solid blue;
}

div::after {
  content: '';
  position: absolute;
  transform: translateX(-0.53rem) rotate(45deg);
  transform-origin: bottom;
  width: 1.25rem;
  height: 6.25rem;
  background: red;
  border: 2px solid red;
}

<div></div>

Answer 2

您必须像下面这样更新 transform-origin。您不需要考虑bottom，而是略高于底部（100% - 10px）。 10px 是宽度的一半

div {
  position: relative;
  left: 100px;
  display: inline-block;
  margin-left: 100px;
  width: 20px;
  height: 100px;
}
div::before,
div::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
  transform-origin: 50% calc(100% - 10px);
  background: red;
}

div::after {
  transform: rotate(45deg);
  background: blue;
}

<div></div>