// Press the play button at the top
<div class="left"> <code>div</code> element <div class="render-raw"></div> </div> <div class="left"> clipped <div class="render-clipped"></div> </div> <p> <pre> background: -moz-linear-gradient(45deg, #00FF00 50%, transparent 0);</pre> </p> <div class="sidenote"> Note: WebKit and Opera support the same property except with <code>-webkit</code> and <code>-o</code> prefixes. </div>
.render-raw { width: 50px; height: 50px; background-color: #00FF00; } .render-clipped { width: 50px; height: 50px; background: -moz-linear-gradient(-45deg, #00FF00 50%, transparent 0); background: -o-linear-gradient(-45deg, #00FF00 50%, transparent 0); background: -webkit-gradient(linear, 0 0, 50 50, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent)); } .left { float: left; margin: 0 1em; } .sidenote { font-size: .9em; color: grey; } p { clear: both; margin: 1em 0; }