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

How to create a layer of arrow up shape div with content using HMTL and CSS? Each arrow up shape is hoverable but should only hover inside the arrow

提问人：Rica Christine 提问时间：10/18/2023 最后编辑：tacoshyRica Christine 更新时间：10/18/2023 访问量：28

问：

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

我想问一下是否有办法将 div 塑造如下图所示，并且只使箭头悬停。

This is the visual layout of the arrow up

HTML CSS 悬停

评论

1赞 tacoshy 10/18/2023
嗨，欢迎来到 SO。请阅读 How to Ask 并以最小可重现示例（-button 或 ）的形式提供尝试的调试详细信息。请注意，寻求工具、库和参考资料（如文档或类似材料）建议的问题在 SO 是偏离主题的，不允许。我将您的问题更改为在 SO 的范围内，并阻止立即关闭此问题。<>Ctrl + M
0赞 tacoshy 10/18/2023
你如何塑造这些箭头？我假设您在下面的箭头处使用伪元素。你已经试过了吗？clip-path

答：

0赞 tacoshy 10/18/2023 #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>

上一个：悬停时如何不同时触发 ovelay？

下一个：使用 AVCaptureMultiCamSession 访问 iphone 15 上的两个后置摄像头