计算创建给定对角线长度的菱形所需的正方形和偏斜的边

Question

我有一个侧面A和B的矩形。

我想创建4个html元素，其形状和大小类似于此处标记为红色的

。

我认为我可以使用transform: skew()来做到这一点。我的问题是，给定具有高度A和宽度B的矩形，我如何创建红色图形？它的长对角线必须等于B，短对角线必须等于A。

抱歉，这可能更多是数学问题。

Answer 1

这里的想法比使用倾斜更容易。您可以依靠多重背景来在给定的矩形内创建形状：

.rect {
  width:200px;
  height:100px;
  border:2px solid;
  background:
    linear-gradient(to top right, red 49.8%,transparent 50%) top right,
    linear-gradient(to top left, red 49.8%,transparent 50%) top left,
    linear-gradient(to bottom right, red 49.8%,transparent 50%) bottom right,
    linear-gradient(to bottom left, red 49.8%,transparent 50%) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
}

<div class="rect"></div>