CSS製作正方形只要使用:before選取器就可以了
html

<div class="box">
    <div class="content">內容文字Content Text</div>
</div>

css

.box {
    display: inline-block; 
    position: relative; 
    width: 50%; 
} 
.box:before  { 
    margin-top: 100%;  /* 比例 1:1 aspect ratio */ 
    margin-top: 75%;    /* 比例  4:3 aspect ratio */ 
    margin-top: 50%;    /* 比例  2:1 aspect ratio */ 
    margin-top: 200%;  /* 比例  1:2 aspect ratio */ 
} 
.content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}