html+css写三角形

最新推荐文章于 2024-08-20 10:31:33 发布

Colin丶c

最新推荐文章于 2024-08-20 10:31:33 发布

阅读量1.6w

点赞数 8

分类专栏： html/css/js 文章标签：三角形 css html

本文链接：https://blog.csdn.net/qq_37618797/article/details/82903981

版权

html/css/js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先我们来看下面一段代码在页面中的效果图：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>三角形</title>
		<style>
			.triangle{
				width: 0;
				height: 0;
				border: 300px solid red;
				border-top-color: black;
				border-bottom-color: yellow;
				border-left-color: green;
				border-right-color: blue;
			}
		</style>
	</head>

	<body>
		<div class="triangle"></div>
	</body>

</html>

效果图：

看到这个效果图，我们就大概知道三角形怎么写了，我们可以将border-bottom设为none这样方块的下半边就没有了

border-bottom: none;

效果图：

然后我们在将border-left 和 border-right的颜色设为透明，这样就只剩border-top了

完整代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>三角形</title>
		<style>
			.triangle{
				width: 0;
				height: 0;
				border: 100px solid transparent;
				border-top-color: black;
				border-bottom: none;
				border-left-color: transparent;
				border-right-color: transparent;
			}
		</style>
	</head>

	<body>
		<div class="triangle"></div>
	</body>

</html>

效果图：