要将一个矩形 div 变成一个直角三角形，可以通过 CSS 的一些属性进行实现。具体的方法是利用 border 属性来隐藏矩形的部分，留下一个直角三角形的形状。以下是实现的步骤：
CSS 方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>矩形变三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左边框透明 */
border-bottom: 50px solid #007bff; /* 底边框蓝色 */
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
解释：width 和 height 设置为 0：通过将 div 的宽度和高度设置为 0，实际上把矩形的主体部分隐藏了。border-left 和 border-bottom：用边框来创建三角形的两条边。border-left 设置为透明（transparent），而 border-bottom 设置为有颜色的边框，形成三角形的底边。
调整三角形的大小：
底边大小：控制 border-bottom 的值来调整三角形的底边长度。
高度：控制 border-left 或 border-bottom 的值，调整三角形的高度和形状。
这种方法通过巧妙地使用 CSS 的 border 属性，不需要额外的图像或复杂的布局，即可实现一个简单的直角三角形。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/4680
