在（自定义）箭头上反应光滑的透明边框

Question

我正在尝试在箭头上创建一个透明边框，例如在 Disney+ 上

就像当你悬停在图像不在的地方时，图像也会显示。

我的 CSS:

.slick-prev:before{
  background: url(./slider/previous-icon.png);
  background-size: contain;
}

.slick-next:before{
  background: url(./slider/next-icon.png);
  background-size: contain;
}

.slick-arrow:before{
  content:""!important;
  width: 165%!important;
  height: 165%!important;
  position: absolute;
  top: 0;
  left: 0;
}

.slick-prev {
  margin-top: -30px;
  margin-left: -8px;
  margin-top: -61px;
}

.slick-next {
  margin-top: -30px;
  margin-right: -8px;
  margin-top: -61px;
}

我尝试了很多东西，比如 border-top transparent 但它只是粘贴了另一个图像