使用 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

根据您使用的数学维度，尝试将 height 设置为 80。

Answer 2

如果要创建完美的菱形（流程图决策符号），则必须先缩放 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() 到 crush/squeeze 单独钻石的高度。 关键点是始终先缩放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>

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

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.

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>

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

Perfect horizontally sqeezed diamond flow chart symbol using div tag

html

css

css-transforms

css-shapes