CSS Triangle Tutorial

HTML
<div id="triangle-tutorial"> <div class="steps"> <div class="step-0">Imagine a box.</div> <div class="step-1">The box has a border-top.</div> <div class="step-2">It also has the other borders.</div> <div class="step-5">Notice how the borders meet each other at angles.</div> <div class="step-6">The background of the box is transparent.</div> <div class="step-7">The box is actually zero width and zero height.</div> <div class="step-8">Three of the borders are actually transparent in color.</div> <div class="step-11">That's how a CSS triangle is made!</div> </div> <div class="triangle-demo"></div> <div class="triangle-title" id="re-run"> Run Again </div> </div>
CSS
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); body { margin: 0; background: #333; color: #fff; font-family: 'Montserrat', Arial, Helvetica, sans-serif; text-align: center; } #triangle-tutorial { margin-top: 35px; } .triangle-demo { width: 200px; height: 200px; margin: 0 auto; background: #e67e22; border-top: 0 solid #9b59b6; border-left: 0 solid #e74c3c; border-bottom: 0 solid #27ae60; border-right: 0 solid #2980b9; transition: 0.8s 0.2s; } .step-1 .triangle-demo { border-top-width: 20px; } .step-2 .triangle-demo { border-left-width: 20px; } .step-3 .triangle-demo { border-right-width: 20px; } .step-4 .triangle-demo { border-bottom-width: 20px; } .step-6 .triangle-demo { background: transparent; } .step-7 .triangle-demo { width: 0; height: 0; } .step-8 .triangle-demo { border-left-color: transparent; } .step-9 .triangle-demo { border-right-color: transparent; } .step-10 .triangle-demo { border-top-color: transparent; } .triangle-title { width: 200px; padding: 1rem; color: white; background: transparent; border: 2px solid #2ecc71; border-radius: 0; margin: 150px auto; opacity: 0; transition: 0.8s 0.2s; cursor: pointer; } .step-11 .triangle-title { opacity: 1; } .step-11 .triangle-demo { border-top-width: 100px; border-right-width: 100px; border-bottom-width: 100px; border-left-width: 100px; animation: rotateTriangle 1s; } .steps .step-0 { opacity: 1; } .step-1 .steps .step-1 { opacity: 1; } .step-2 .steps .step-2 { opacity: 1; } .step-5 .steps .step-5 { opacity: 1; } .step-6 .steps .step-6 { opacity: 1; } .step-7 .steps .step-7 { opacity: 1; } .step-8 .steps .step-8 { opacity: 1; } .step-11 .steps .step-11 { opacity: 1; } .steps { position: relative; height: 45px; font-size: 30px; margin-bottom: 30px; } .steps > div { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background: #333; transition: 0.3s; height: 100%; } h1 { text-transform: uppercase; letter-spacing: 1px; font-size: 1.5rem; color: #999; } hr { width: 100px; color: #95a5a6; } @keyframes rotateTriangle { from { transform: rotate(0); } to { transform: rotate(360deg); } }
JAVASCRIPT
(function () { var demo, run; demo = $('#triangle-tutorial'); run = function () { setTimeout(function () { return demo.addClass('step-1'); }, 2500); setTimeout(function () { return demo.addClass('step-2'); }, 5000); setTimeout(function () { return demo.addClass('step-3'); }, 5500); setTimeout(function () { return demo.addClass('step-4'); }, 6000); setTimeout(function () { return demo.addClass('step-5'); }, 7500); setTimeout(function () { return demo.addClass('step-6'); }, 10000); setTimeout(function () { return demo.addClass('step-7'); }, 12000); setTimeout(function () { return demo.addClass('step-8'); }, 14000); setTimeout(function () { return demo.addClass('step-9'); }, 14500); setTimeout(function () { return demo.addClass('step-10'); }, 15000); return setTimeout(function () { return demo.addClass('step-11'); }, 18000); }; run(); $('#re-run').on('click', function () { $('#triangle-tutorial').removeClass(); return run(); }); }.call(this));
Expand for more options Login