CSS实现三角形绘制

最新推荐文章于 2024-08-12 10:59:58 发布

smart_lingpan

最新推荐文章于 2024-08-12 10:59:58 发布

阅读量175

点赞数

分类专栏： CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_42383753/article/details/81979937

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用CSS绘制三角形，其实就是矩形的一条可见边。

首先我们来看一般的矩形。

<style type="text/css">
    .box{
		height: 30px;
		width: 30px;
		border: 20px solid transparent;
		border-top: 20px solid red;
		border-right: 20px solid purple;
		border-bottom: 20px solid green;
		border-left:20px solid blue;
	}
</style>
<body>
    <div class="box"></div>
</body>

我们给了矩形四条边不同的颜色，如下图所示。可以看出，在矩形角部的重叠部分，相邻两条边各分了角的一半，每条边的实际上色部分为一个梯形。

接着我们把矩形的大小设为0，让矩形只有边框。

<style type="text/css">
    .box{
		height: 0px;
		width: 0px;
		border: 20px solid transparent;
		border-top: 20px solid red;
		border-right: 20px solid purple;
		border-bottom: 20px solid green;
		border-left:20px solid blue;
	}
</style>
<body>
    <div class="box"></div>
</body>

我们发现每条边的实际着色为以每条边为底的三角形。由此我们可以想到，当只有一条边着色，另外三条边透明时，我们就可以得到一个三角形。于是我们把边的颜色设为透明，再对一条边进行着色，通过改变边的宽度，可以得到任意形状的三角形。

<style type="text/css">
    .box{
		height: 0px;
		width: 0px;
		border: 20px solid transparent;
		border-bottom:30px solid red;
	}
</style>
<body>
    <div class="box"></div>
</body>