CSS——三角形

最新推荐文章于 2024-01-31 17:42:20 发布

spfLinux

最新推荐文章于 2024-01-31 17:42:20 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/spfLinux/article/details/78457157

css 专栏收录该内容

45 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1 {
			width: 0;  /* 一定要定义宽高 */
			height: 0;
			border: 8px solid transparent;  /* 透明 */
			border-top: 8px solid red;
		}
		#d2 {
			width: 0;
			height: 0;
			border: 8px solid transparent;
			border-right: 8px solid red;
		}
		#d3 {
			width: 0;
			height: 0;
			border: 8px solid transparent;
			border-bottom: 8px solid red;
		}
		#d4 {
			width: 0;
			height: 0;
			border: 8px solid transparent;
			border-left: 8px solid red;
		}
		#d5 {
			width: 0;
			height: 0;
			border-top: 8px solid red;
			border-right: 8px solid blue;
			border-bottom: 8px solid green;
			border-left: 8px solid black;
		}
	</style>
</head>
<body>
	<div id="d1"></div><hr/>
	<div id="d2"></div><hr/>
	<div id="d3"></div><hr/>
	<div id="d4"></div><hr/>
	<div id="d5"></div>
</body>
</html>