CSS绘制三角形

最新推荐文章于 2025-05-14 17:03:41 发布

kongjunchao159

最新推荐文章于 2025-05-14 17:03:41 发布

阅读量518

点赞数

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/52460314

版权

CSS3 专栏收录该内容

13 篇文章

订阅专栏

使用css绘制三角形，主要利用了盒模型的border属性，当盒子内容的宽度和高度远小于盒子边框的宽度时，边框会显示为等腰梯形，由此，可以通过设置盒子宽度和高度为0，再利用透明边框来实现，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		body{padding:30px;}
		.san-1{width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red;}
		.san-2{margin-top:10px; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid red; position:relative;}
		.san-2 span{display:block; width:0; height:0; border-left:48px solid transparent; border-right:48px solid transparent; border-bottom:48px solid #FFF; position:absolute; top:1px; left:-48px;}
		.box{margin-top:10px; width:10px; height:10px; border-top:50px solid red; border-right:50px solid yellow; border-bottom:50px solid blue; border-left:50px solid green;}
	</style>
</head>
<body>
	<!--三角形-->
	<div class="san-1"></div>

	<!--带边框的三角形-->
	<div class="san-2">
		<span></span>
	</div>

	<div class="box"></div>
</body>
</html>

显示效果