创建各种三角形-css

最新推荐文章于 2024-04-14 08:33:19 发布

机器猫zhao

最新推荐文章于 2024-04-14 08:33:19 发布

阅读量289

点赞数

分类专栏： css 面试总结

本文链接：https://blog.csdn.net/zx_p24/article/details/78049446

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

面试总结

9 篇文章 0 订阅

订阅专栏

<!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>

机器猫zhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建各种三角形-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; }
复制链接

扫一扫

专栏目录