使用CSS绘制三角形的方法有很多种，其中等腰三角形是一种非常常见的形状。当我们将鼠标悬停在三角形上时，改变其背景色是一种常见的交互效果。本文将介绍如何使用CSS绘制等腰三角形，并在悬浮时改变其背景色。

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #333;
}
.triangle:hover {
  background-color: #555;
}

上述代码中，.triangle类定义了一个等腰三角形，其宽度为0，高度为0，底边由一个50像素的黑色边框构成，两侧由25像素的透明边框构成。当鼠标悬浮在三角形上时，:hover伪类将应用，将背景色设置为深灰色。

需要注意的是，:hover伪类只有在鼠标悬浮在元素上时才会生效，如果鼠标离开元素，背景色又会回到原来的颜色。因此，.triangle类的背景色应该设置为原本需要显示的颜色，以确保鼠标离开时背景色能够恢复到原样。

我们还可以通过改变三角形的大小、颜色等属性来实现更加多样化的效果。希望本文对想要学习CSS三角形的同学有所帮助。