要实现一个DIV角部的颜色效果，可以通过使用border和box-shadow属性来创建。以下是一个示例代码，展示如何只用一个DIV来实现这个效果：
<!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-effect {
width: 200px;
height: 200px;
position: relative;
background-color: #f0f0f0;
overflow: hidden;
}
.corner-effect::before {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 100px;
height: 100px;
border: 50px solid transparent;
border-top-color: #ff6347; /* 红色 */
border-left-color: #ff6347; /* 红色 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="corner-effect"></div>
</body>
</html>
DIV容器：.corner-effect 是一个200x200像素的DIV，背景颜色为浅灰色（#f0f0f0）。
伪元素：使用::before伪元素来创建角部效果。伪元素被绝对定位在DIV的左上角。
边框：通过设置border属性，创建一个透明的边框，并且只给border-top和border-left设置颜色（这里是红色#ff6347）。这样会形成一个三角形的效果。
旋转：通过transform: rotate(45deg)将伪元素旋转45度，使其形成一个角部效果。
阴影：使用box-shadow为伪元素添加阴影，增强视觉效果。
这个代码会在DIV的左上角创建一个红色的角部效果，并且带有阴影。你可以通过调整颜色、大小和阴影来定制这个效果。
border-top-color和border-left-color来改变角部的颜色。box-shadow的参数，可以改变阴影的大小和模糊程度。top、left、right、bottom等属性来定位伪元素。