要实现一个DIV的角部颜色变化，可以使用CSS的border属性和border-radius属性结合::before或::after伪元素来实现。以下是一个示例代码，展示如何只用一个DIV和border属性来实现角部颜色变化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV角部颜色变化</title>
<style>
.corner-color {
width: 200px;
height: 200px;
position: relative;
border: 2px solid transparent;
border-radius: 10px;
background-color: #f0f0f0;
}
.corner-color::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 20px;
height: 20px;
border-top: 2px solid red;
border-left: 2px solid red;
border-radius: 10px 0 0 0;
}
.corner-color::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 20px;
height: 20px;
border-bottom: 2px solid blue;
border-right: 2px solid blue;
border-radius: 0 0 10px 0;
}
</style>
</head>
<body>
<div class="corner-color"></div>
</body>
</html>
DIV的基本样式：
.corner-color 是一个200x200像素的DIV，设置了border-radius来使其角部圆润。border: 2px solid transparent; 设置了一个透明的边框，以便为伪元素的边框留出空间。伪元素 ::before：
::before伪元素来创建左上角的颜色变化。border-top 和 border-left 设置为红色，形成左上角的颜色变化。border-radius: 10px 0 0 0; 使得左上角的边框圆角与DIV的圆角一致。伪元素 ::after：
::after伪元素来创建右下角的颜色变化。border-bottom 和 border-right 设置为蓝色，形成右下角的颜色变化。border-radius: 0 0 10px 0; 使得右下角的边框圆角与DIV的圆角一致。通过这种方式，你可以只用一个DIV和border属性来实现角部颜色变化。你可以根据需要调整颜色、大小和圆角半径等属性。