Medio cuadro foto medio cuadro triangulo

dabblet.css

/**
 * Medio cuadro foto medio cuadro triangulo
 */
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;}

#triangulo {
width: 0px;
height: 0px;
border-top: 0px;
border-left: 100px solid transparent;
border-right: 0px solid transparent;
float: left;
border-bottom: 100px solid rgba(0,0,0,0.7);
}
#medio {
height: 100px;
width: 100px;
background: #aea;
}

dabblet.html

<div id="triangulo"></div>
<div id="medio"></div>

dabblet.js

// alert('Hello world!');

settings.json

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