javascript - 有没有办法在 html/css 中制作一个三角形的可点击框？

Question

好的，所以我想开发一个门户网站页面，可以将您引导到我拥有的多个网站。我想这样设计它： 每个部分都是带有 JS 的可点击部分，当悬停时它会弹出一点并淡入某种图片。无论如何，我的问题是如何让 div 像这样倾斜？我读过关于使用边框技巧制作 CSS 三角形的文章，但我不相信这会起作用。我也在考虑是否有办法以某种方式使用 CSS 变换属性，但我不能喜欢在页面周围统一的三角形，然后保持它的可伸缩性，以便它具有响应性。有没有人有什么建议？或者这甚至可能吗？

标签： javascripthtmljquerycss

Answer 1

CSS 提供了一种叫做剪贴蒙版的东西。这使您可以超越基本的颜色形状并允许对图像进行整形。当用作您想要的链接时，这看起来不错。

查看有关剪辑路径的更多信息：https ://css-tricks.com/almanac/properties/c/clip-path/

可以在此处找到用于导出形状的实际 CSS 的有用站点：https ://bennettfeely.com/clippy/

这与用于响应的媒体查询和用于安排的绝对定位结合使用应该可以让您到达您想要的位置。