如何生成一个CSS的三角形

hfszy0

2013-11-01

文章源自:http://www.gbtags.com/gb/share/2094.htm

如何生成一个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 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.（盒模型的宽度和高度设置为0）</div>
			<div class="step-8">Three of the borders are actually
				transparent in color.（其它3个边框颜色透明）</div>
			<div class="step-11">That's how a CSS triangle is
				made!（看到了一个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>

css css三角形 html代码