<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-在css中绘制三角形及相关应用-基本原理</title>
    <style>
        .box {
            width: 130px;
            height: 130px;
            border-width: 10px;
            border-style:solid;
            border-color: red blue green yellow;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript" src="http://res.42du.cn/vendor/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var id = setInterval(function () {
            var width = $(".box").css("width");
            var intWidth = parseInt(width.replace("px",""));
            var nextWidth =  intWidth-10;
            var borderWidth = (150 - nextWidth) / 2;
            var $box = $(".box");
            $box.css("width",nextWidth+"px");
            $box.css("height",nextWidth+"px");
            $box.css("border-width",borderWidth+"px");
            if(nextWidth <= 0) {
                clearInterval(id);
            }
        },1000);
    });
</script>
</body>
</html>