CSS widthとheightを同じにする 正方形のブロックを作る

widthとheighを同じにする

widthとheightを揃えたい要素にpadding-topでwidthと同じ%を指定する

HTML
    <div class="parent"> 
    </div>

CSS
 　　　　　　parent {
        width: 40%;
        padding-top: 40%";
    }

文字を入れる場合

<div class="parent">
    <p class="child">
    テキストテキスト 
    </p>
</div>

.parent {
    background-color: #000;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.parent::before {
  display: block;
  content: '';
  padding-top: 100%;
}
.child {
  color: #fff;
}