golden rectangle

dabblet.css

/* 		golden rectangle	*/
body { font-size: 90px; }
 
.square {
    position: absolute;
    width: 3em;
    height: 3em;
    background-image: linear-gradient(to bottom, rgba(50,50,50,.4) 1px, rgba(50,50,50,0));
	background-size: 1px 100%;
	background-repeat: no-repeat;
	background-position: center center;
    border: 1px solid black;
}
.circle {
    position: absolute;
    left:-1.74em;
    top: -0.35em;
    height: 6.64em;
    width:  6.64em;
    border: 1px solid red;
    border-radius: 50%;
    background-image: linear-gradient(red 1px, red 2px);
    background-repeat: no-repeat;
    background-size: 3px;
    background-position: 50%;
}
.golden-rectangle {
    position: absolute;
    width: 4.81em;
    height: 3em;
    background: rgba(255, 215, 0, .3);
}
body * {
	margin: .5em;
	box-sizing: border-box;
	top: 0;
}

dabblet.html

<div class="square"></div>
<div class="golden-rectangle"></div>
<div class="circle"></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}