html - 使用 div 标签的完美水平挤压菱形流程图符号

Question

我想使用 CSS3 变换来压缩 <div>到一个完美的流程图决策符号。

Here's a fiddle

我的 CSS

.diamond {
  top: 100px;
  left: 100px;
  height: 75px;
  width: 200px;
  position: absolute;
  border: solid 1px black;
          transform: skewX(-46deg) skewY(-11deg) scaleY(0.5) rotate(45deg);
  -webkit-transform: skewX(-46deg) skewY(-11deg) scaleY(0.5) rotate(45deg);
}

但我无法使左右两个提示完全水平和上下两个提示完全垂直。

Answer 1

如果你想创建一个完美的菱形(流程图决策符号)，那么你必须首先缩放 Y 轴以使元素的高度与其宽度匹配，然后只需应用 rotate 变换.其他转换并不是真正需要的。请记住，缩放必须在旋转之前完成(因此，它必须添加在旋转的右侧)。

.diamond {
  top: 100px;
  left: 100px;
  height: 75px;
  width: 200px;
  position: absolute;
  border: solid 1px black;
  border-width: 1px 3px;
  transform-origin: left center;
  transform: rotate(45deg) scaleY(2.667);
}

<div class="diamond"></div>

上面的演示生成了一个普通的钻石。如果你想让钻石看起来沿着 Y 轴被挤压，那么你可以在旋转后添加一个额外的 scaleY() 来单独挤压/挤压钻石的高度。 关键点是始终首先缩放 Y 轴以使高度和宽度相互匹配。

.diamond {
  top: 100px;
  left: 100px;
  height: 75px;
  width: 200px;
  position: absolute;
  border: solid 1px black;
  border-width: 1px 3px;
  transform: scaleY(0.5) rotate(45deg) scaleY(2.667);
}

<div class="diamond"></div>

如果要挤压 X 轴，请在 X 轴而不是 Y 轴上应用缩小比例。

.diamond {
  top: 100px;
  left: 100px;
  height: 75px;
  width: 200px;
  position: absolute;
  border: solid 1px black;
  border-width: 1px 3px;
  transform-origin: left center;  
  transform: scaleX(0.5) rotate(45deg) scaleY(2.667);
}

<div class="diamond"></div>

只要比例因子设置正确(使它们相等)，元素的实际高度和宽度并不重要。由于元素具有设定的宽度和高度，因此可以轻松计算出该系数。不需要其他复杂的旋转或倾斜 Angular 计算。

Note: Transforms always affect the borders of an element. Some borders tend to get thicker while some others become thinner depending on the transform that is applied and the axis in which it is applied. So, it is always better to do a trial and error and set the border-width as appropriate. There is no simple solution for this particular problem.