写一个有hover：：before和hover：：after的HTML和css代码

HTML代码：

<div class="box"></div>

CSS代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: relative;
}

.box::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #000;
  border-bottom: 50px solid transparent;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.box::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid #000;
  border-bottom: 50px solid transparent;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.box:hover::before {
  border-right-color: #f00;
}

.box:hover::after {
  border-left-color: #f00;
}

上面的代码中，使用 `::before` 和 `::after` 伪元素在 `.box` 元素的左侧和右侧分别创建了两个三角形，当鼠标悬浮在 `.box` 元素上时，利用 `:hover` 伪类和 `transition` 属性实现了两个三角形颜色从黑色到红色的渐变效果。