css控制border画三角形

最新推荐文章于 2025-03-24 00:59:30 发布

原创最新推荐文章于 2025-03-24 00:59:30 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

HTML/CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用CSS的border属性结合透明度设置来绘制一个具有特定颜色填充的透明边框三角形。通过调整RGBA颜色值和transparent关键字，可以在不同背景上实现良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css控制border边框画三角形</title>
	<style type="text/css">
		div{
			width: 50px;
			background: red;
		}
		/*为了适应不同的背景 需要使边框透明
		1.使用RGBA 颜色元素写为：rgba(200,200,200,0.5)
		在RGB的基础上多了控制透明度的参数
		根据需要填写最后一个数的值在 0~1之间即可
		2.颜色为 transparent*/
		#trip{
			width: 0px;
			height: 0px;
			border-top: 50px solid transparent;
			border-right: 50px solid rgba(200,200,200,0);
			border-bottom: 50px solid yellow;
			border-left: 50px solid rgba(200,200,200,0);
		}
	</style>
</head>
<body>
	<div>
		<div id="trip"></div>
	</div>
</body>
</html>