创建各种三角形-css

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.triangle {
				width: 0;
				height: 0;
				border-top: 20px solid #EEB422;
				border-right: 20px solid #C0FF3E;
				border-bottom: 20px solid #A020F0;
				border-left: 20px solid #7CFC00;
			}
			
			.triangle-up {
				width: 0;
				height: 0;
				border-right: 20px solid transparent;
				border-bottom: 40px solid #A020F0;
				border-left: 20px solid transparent;
			}
			
			.triangle-down {
				width: 0;
				height: 0;
				border-top: 40px solid #EEB422;
				border-right: 20px solid transparent;
				border-left: 20px solid transparent;
			}
			
			.triangle-left {
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 40px solid #7CFC00;
			}
			
			.triangle-right {
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-right: 40px solid #C0FF3E;
			}
			
			.triangle-left-bottom {
				width: 0;
				height: 0;
				border-top: 40px solid transparent;
				border-left: 40px solid #7CFC00;
			}
			
			.triangle-right-bottom {
				width: 0;
				height: 0;
				border-top: 40px solid transparent;
				border-right: 40px solid #C0FF3E;
			}
		</style>
	</head>

	<body>
		<div class="row">
			<span>四个三角</span>
			<div class="triangle">
			</div>
		</div>
		<div class="row">
			<span>上三角</span>
			<div class="triangle-up">
			</div>
		</div>
		<div class="row">
			<span>下三角</span>
			<div class="triangle-down">
			</div>
		</div>
		<div class="row">
			<span>左三角</span>
			<div class="triangle-left">
			</div>
		</div>
		<div class="row">
			<span>右三角</span>
			<div class="triangle-right">
			</div>
		</div>
		<div class="row">
			<span>左下角</span>
			<div class="triangle-left-bottom">
			</div>
		</div>
		<div class="row">
			<span>右下角</span>
			<div class="triangle-right-bottom">
			</div>
		</div>

	</body>

</html>
创建各种三角形-css

猜你喜欢
