用css3做一个三角形

用css3做一个三角形

<style>
		.up {
			width: 0;
			height: 0;
			border-width: 0 30px 30px;
			border-style: solid;
			border-color: transparent transparent cyan;
			margin-top: 10px;
		}
		.down {
			width: 0;
			height: 0;
			border-width: 30px 30px 0;
			border-style: solid;
			border-color: cyan transparent transparent transparent;
			margin-top: 10px;
		}
		.left {
			width: 0;
			height: 0;
			border-width: 30px 30px 30px 0;
			border-style: solid;
			border-color: transparent cyan transparent;
			margin-top: 10px;
		}
		.right {
			width: 0;
			height: 0;
			border-width: 30px 0 30px 30px;
			border-style: solid;
			border-color: transparent cyan transparent;
			margin-top: 10px;
		}
	</style>
<body>
	<div class="up"></div>
	<div class="down"></div>
	<div class="left"></div>
	<div class="right"></div>
</body>

结果如下
用css3做一个三角形

上一篇:css3媒体查询


下一篇:万哥CSS3笔记