如何使用 HMTL 和 CSS 创建一层带有内容的向上箭头形状 div？每个向上箭头形状都是可悬停的，但只能悬停在箭头内部

Question

我已经尝试过这个，但只使用箭头图像。但由于 div 部分的形状为矩形，因此没有箭头的区域仍然可以悬停。

我想问是否有办法将div的形状如下图所示，并且只使箭头可悬停。

Answer 1

不使用伪元素而是使用

clip-path

创建箭头。剪切路径不会隐藏元素的一部分，但实际上会将它们剪切掉。这意味着，“元素的不可见部分”实际上并不存在，因此

:hover

不会识别它们：

.arrow {
  background-color: red;
  height: 70vh;
  width: 60vh;
  clip-path: polygon(50% 0, 100% 30vh, calc(100% - 10vh) 30vh, calc(100% - 10vh) 100%, 10vh 100%, 10vh 30vh, 0 30vh);
}

.arrow:hover {
  background-color: blue;
}

.offset {
  position: absolute;
  top: 20vh;
  background-color: pink;
}

<div class="arrow"></div>
<div class="arrow offset"></div>