使用div标签的完美水平方形菱形流程图符号

Question

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

这是一个小提琴

我的 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>

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

注： 变换始终会影响元素的边框。某些边框往往会变粗，而其他一些边框会变细，具体取决于应用的变换和应用它的轴。因此，最好进行反复试验并适当设置border-width。对于这个特定问题，没有简单的解决方案。

Answer 2

由于您使用的数学维度，请尝试将height设置为 80。

Answer 3

使用pseudo-element按顺序应用翻译：

.diamond {
  top: 100px;
  left: 100px;
  height: 200px;
  width: 200px;
  position: absolute;
  transform: rotateX(60deg);
  -webkit-transform: rotateX(60deg);
}
.diamond:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px black;
  transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
}

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

而且矫枉过正，使用平移矩阵和框阴影而不是边框来更好地渲染：

.diamond {
  top: 100px;
  left: 100px;
  height: 200px;
  width: 200px;
  position: absolute;
  box-shadow: 0 0 0 4px;
  transform: matrix3D(0.710, -0.355, -0.618, 0.000, 0.710, 0.355, 0.618, 0.000, 0.000, -0.870, 0.500, 0.000, 0.000, 0.000, 0.000, 1.000);
  -webkit-transform: matrix3D(0.710, -0.355, -0.618, 0.000, 0.710, 0.355, 0.618, 0.000, 0.000, -0.870, 0.500, 0.000, 0.000, 0.000, 0.000, 1.000);
}

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