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变换。其他变换并不是真正需要的。请记住，缩放必须在旋转之前完成（因此，必须在旋转的右侧添加）。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

以上演示生成普通钻石。如果你想要沿着Y轴挤压钻石，那么你可以在旋转后添加一个额外的scaleY()来压碎/挤压钻石的高度。 关键点 是始终先缩放Y轴，使高度和宽度与另一个匹配。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

注意：变换始终会影响元素的边框。根据所应用的变换和应用它的轴，一些边界趋于变厚而另一些变得更薄。因此，最好进行反复试验并根据需要设置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>

使用div标签的完美水平sqeezed钻石流程图符号

3 个答案: