要实现仅用一个DIV元素实现角部颜色变化的效果，可以使用CSS的linear-gradient背景渐变和clip-path属性。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corner Color Change</title>
<style>
.corner-color {
width: 200px;
height: 200px;
background: linear-gradient(135deg, transparent 50%, #ff0000 50%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
}
</style>
</head>
<body>
<div class="corner-color"></div>
</body>
</html>
linear-gradient:
135deg 表示渐变的角度为135度，从左上角到右下角。transparent 50% 表示从左上角到50%的位置是透明的。#ff0000 50% 表示从50%的位置到右下角是红色。clip-path:
polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%) 定义了一个多边形路径，将DIV元素裁剪为一个三角形，使得只有左上角到右下角的部分显示出来。这个DIV元素的左上角到右下角会显示红色，其余部分为透明。你可以通过调整linear-gradient的角度和颜色来实现不同方向的角部颜色变化。
linear-gradient的角度和clip-path的路径。例如，将角度改为45deg可以实现右上角到左下角的颜色变化。.corner-color {
background: linear-gradient(45deg, transparent 50%, #00ff00 50%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 50%);
}
这样，右上角到左下角会显示绿色。