如何生成一个CSS的三角形
<!Doctype html><html><head><meta charset="utf-8"><title>小三角</title><style type="text/css">@import url(http://fonts.googleapis.com/css?family=Andika);.triangle-demo {width: 100px;height: 100px;margin: 0 auto;background: tan;border-top: 0 solid #EE7C31;border-left: 0 solid #F5D97B;border-bottom: 0 solid #D94948;border-right: 0 solid #8DB434;transition: 0.8s 0.2s;}.step-1 .triangle-demo {border-top-width: 10px;}.step-2 .triangle-demo {border-left-width: 10px;}.step-3 .triangle-demo {border-right-width: 10px;}.step-4 .triangle-demo {border-bottom-width: 10px;}.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: 300px;padding: 1rem;color: white;background: #D94948;border-radius: 20px;margin: auto;opacity: 0;transition: 0.8s 0.2s;}.step-11 .triangle-title {opacity: 1;}body {background: #333;font-family: 'Andika', sans-serif;color: white;text-align: center;font-size: large;transform: translateZ(0);}.steps {position: relative;height: 45px;margin-bottom: 20px;}.steps>div {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;background: #333;transition: 0.3s;}.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;}h1 {text-transform: uppercase;letter-spacing: 1px;font-size: 14px;border-bottom: 1px solid #555;color: #999;padding-bottom: 10px;font-family: Arial;font-weight: normal;}</style></head><script src="js/jquery-1.8.2.js"></script><body><h1>超短小教程：如何生成一个CSS的三角形？</h1><div id="whole-thing"><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 atangles.（注意一下边框连接处的角度）</div><div class="step-6">The background of the box istransparent.（盒模型的背景是透明的）</div><div class="step-7">The box is actually zero width and zeroheight.（盒模型的宽度和高度设置为0）</div><div class="step-8">Three of the borders are actuallytransparent in color.（其它3个边框颜色透明）</div><div class="step-11">That's how a CSS triangle ismade!（看到了一个CSS的三角形如何生成了吧！）</div></div><div class="triangle-demo"></div><div class="triangle-title"><button id="re-run">再运行一次</button></div></div></body><script type="text/javascript"> (function() { var demo, run; demo = $("#whole-thing"); 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() { $("#whole-thing").removeClass(); return run(); }); }).call(this);</script></html>
?
?
