码迷,mamicode.com
首页 > Web开发 > 详细

使用css(border)边框实现倒三角

时间:2015-04-10 11:16:13      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用border制作倒三角</title>
	</head>

	<body>

		<style>
			.arrow_01 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: blue transparent transparent transparent;
			}
			.arrow_02 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent blue transparent transparent;

			}
			.arrow_03 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent transparent blue transparent;
			}
			.arrow_04 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent transparent transparent blue;
			}
			.arrow_05 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: blue blue transparent transparent;
			}
			.arrow_06 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent transparent blue blue;
			}
			
			.arrow_07 {
				width: 0;
				height: 0;
				border: 60px solid #000;
				border-color: transparent blue blue transparent;
			}
			
						
		</style>

		<div class="arrow_01"></div>
		<div class="arrow_02"></div>
		<div class="arrow_03"></div>
		<div class="arrow_04"></div>
		<div class="arrow_05"></div>
		<div class="arrow_06"></div>
		<div class="arrow_07"></div>

	</body>

</html>

 技术分享

使用css(border)边框实现倒三角

标签:

原文地址:http://www.cnblogs.com/wulianghai/p/4413776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!