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

我想使用CSS3转换将

压缩为一个完美的流程图决策符号

我的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);
}

---

但是我无法使左右两个尖端完全水平和上下两个尖端完全垂直

尝试将

高度

设置为

80

，因为您使用的是数学尺寸。

如果您想创建一个完美的菱形（流程图决策符号）然后，必须首先缩放Y轴，使元素的高度与其宽度匹配，然后仅应用

旋转

变换。实际上并不需要其他转换。请记住，缩放必须在旋转之前完成（因此，必须将其添加到旋转的右侧）

.diamond{
顶部：100px；
左：100px；
高度：75px；
宽度：200px；
位置：绝对位置；
边框：实心1px黑色；
边框宽度：1px 3px；
变换原点：左中心；
变换：旋转（45度）scaleY（2.667）；
}

---

使用

伪元素

按顺序应用翻译：

.diamond{
顶部：100px；
左：100px；
高度：200px；
宽度：200px；
位置：绝对位置；
变换：旋转（60度）；
-webkit变换：rotateX（60度）；
}
戴蒙德：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边框：实心1px黑色；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}

不可接受？我觉得不错。