如何在页面上画个三角形

最新推荐文章于 2023-05-20 21:05:16 发布

LuLiangJun001

最新推荐文章于 2023-05-20 21:05:16 发布

阅读量545

点赞数 1

分类专栏：前端小白文章标签： html css

本文链接：https://blog.csdn.net/luliangjun001/article/details/105875288

版权

前端小白专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何在页面上画个三角形

首先我们要知道边框的一个特性：每条边框之间是通过斜线衔接的。也就是说，每条边框都可以看作是一个矩形。

<head>
	<style>
		#box{
			width:100px;
			height:100px;
			border-width:50px;
			border-style:solid;
			border-color:red green blue yellow;	
		}
	</style>
</head>
<body>
	<div id='box'></div>
</body>

效果图:
在这里插入图片描述
从这个图中可以看到，它是由边框+内容区域（白色部分）组成的，每条边框之间是条斜线，如果将斜线进行延长，矩形就变成了三角形。我们把内容区域(不设置宽高)去掉，看看会发生什么

<style>
		#box{
			width:0px;
			height:0px;
			border-width:50px;
			border-style:solid;
			border-color:red green blue yellow;
		}
	</style>

效果图如下：
在这里插入图片描述
如果我们只需要显示某一边的三角形，可以有几种办法

将其他边的颜色全部调成背景色，但后期维护很麻烦
使用 transparent属性将其他边隐藏起来，推荐使用

这里采用第二种，并显示上三角形为例：

	<style>
		#box{
			width:0px;
			height:0px;
			border-width:50px;
			border-style:solid;
			border-color:red transparent transparent transparent;	
		}
	</style>