css方式将div变成箭头，该箭头样式为一个边长为20px正方形，在正方形内以正方形上边为底边的向下的等腰三角形，将这个等腰三角形向下平移20px

可以使用CSS的伪元素来实现这个箭头样式。具体的代码如下：

.arrow {
  position: relative;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #000000;
}

.arrow::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid #000000;
}

解释一下上面的代码：

首先，我们创建了一个大小为0的div，设置其position属性为relative，这样我们可以在这个div内部使用position:absolute来定位它的伪元素。

然后，我们设置了这个div的边框。左右两侧的边框宽度都为10px，颜色为透明，这样就形成了一个等腰三角形。上方的边框宽度为20px，颜色为黑色，这样就形成了一个边长为20px的正方形。

接下来，我们使用伪元素::before来创建一个完全相同的三角形，使用content属性将其内容设置为空字符串，使用absolute定位到原先的三角形下方，并将它的上边框向下平移20px，这样就形成了一个完整的箭头形状。

最后，我们可以为这个div设置任何想要的样式，比如背景色、边框等等。