<div class="box"></div>
.box {
    /* Apenas centralizando
    e dando cor. Ignore. */
    margin: 0 auto;
    background: #9c27b0;

    /* Defina a largura */
    width: 200px;
}
.box::before {
    content: "";
    float: left;
    /* Defina a proporção.
    Ex.: 100% = 1.1 */
    padding-top: 100%;
}
.box::after {
    content: "";
    display: block;
    clear: both;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.