js在长方形的元素内等比例画一个 距离高位置为40px的正方形

可以使用CSS中的padding或者transform来实现。

使用padding：

首先需要设置长方形元素的宽度和高度，然后通过padding来撑开元素，使其形成一个正方形。具体代码如下：

<div class="rectangle">
  <div class="square"></div>
</div>

.rectangle {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: #f5f5f5;
}

.square {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #333;
}

其中，长方形元素的宽度为200px，高度为400px。正方形元素使用绝对定位，并设置距离长方形元素顶部40px的位置。通过设置上、下、左、右的值为0，并设置margin为auto来使正方形居中。然后通过设置border来撑开元素，border-top和border-bottom的值为60px，border-left的值为60px，这样就形成了一个边长为60px的正方形。

使用transform：

可以使用CSS中的transform来对正方形进行缩放。具体代码如下：

<div class="rectangle">
  <div class="square"></div>
</div>

.rectangle {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: #f5f5f5;
}

.square {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  background-color: #333;
  transform: scale(1, 1);
}

其中，长方形元素的宽度为200px，高度为400px。正方形元素使用绝对定位，并设置距离长方形元素顶部40px的位置。通过设置上、下、左、右的值为0，并设置margin为auto来使正方形居中。然后设置正方形元素的宽度和高度为60px，并设置背景颜色为#333。最后通过transform来对正方形进行缩放，scale函数的第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例，这里都设置为1，表示不进行缩放