Draw 4 diamonds (really rotated circles) inside 1 larger diamond using the power of CSS; uses Bootstrap for col spacing

4DiamondsInOneHack.html

<style>
/* Diamond Hack CSS */
.diamond {
    width: 160px;
    height: 160px;

    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

    overflow: hidden;
    border: 2px solid #000000;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
.inner-diamond {
    width: 80px;
    height: 80px;

    overflow: hidden;
    border: 2px solid #000000;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
/* end Diamond Hack CSS */
}

<!-- Diamond Hack
     It's just 2 rows of inner squares inside a larger square all rotated with CSS
-->
<div class="diamond">
    <div class="diamond-row row">
        <div style="margin-left: 11px;" class="inner-diamond col-xs-6"></div>
        <div class="inner-diamond col-xs-6"></div>
    </div>


    <div class="diamond-row row">
        <div style="margin-left: 11px;" class="inner-diamond col-xs-6"></div>
        <div class="inner-diamond col-xs-6"></div>
    </div>
</div>
<!-- / Diamond Hack -->