html - 使用 CSS 或剪辑路径悬停时等距 45 度(长/对 Angular 线)阴影

Question

我正在尝试重新创建 Twitch 悬停在游戏美术上方时的悬停效果。

https://imgur.com/ukqAxha

我试过使用 clip-path，但无法得到我正在寻找的正确形状。我什至不确定剪辑路径是否是我应该使用的，也不确定我的代码是否最适合重新创建此类效果。

https://codepen.io/thomaschsu/pen/Rwwwgex

.img-full {
  position: absolute;
  width: 18rem;
  margin: 50px;
  transition: transform 0.1s ease;
  max-height: 50vh;
  max-width: 35vh;
}

.box {
  position: relative;
  top: 11vh;
  left: 11vh;
  height: 47vh;
  width: 35vh;
  background-color: #9147ff;
  z-index: -1;
  display: none;
  clip-path: polygon(100% 0, 100% 85%, 92% 100%, 0 100%, 0 20%, 20% 0);
}

.img-full:hover {
   transform: translate(5%, -2%);
}

.img-full:hover + .box {
  display: block;
}

Answer 1

这是一个带有边框和渐变的想法:

img {
 width:150px;
 margin:20px;
 border:0 solid transparent;  
 border-image:linear-gradient(-45deg,transparent 14px,red 15px calc(100% - 15px), transparent calc(100% - 14px)) 10;
 transition:0.3s all;
}
img:hover {
  border-left-width:10px;
  border-bottom-width:10px;
  margin-top:10px;
}

<img src="https://i.imgur.com/cFeWhuf.jpg">

填充和背景的相同技巧:

img {
 width:150px;
 margin:20px;
 padding:0;  
 background:linear-gradient(-45deg,transparent 6px,red 7px calc(100% - 7px), transparent calc(100% - 6px));
 transition:0.3s all;
}
img:hover {
  padding:0 0 10px 10px;
  margin-top:10px;
}

<img src="https://i.imgur.com/cFeWhuf.jpg">