Javascript 菜单项上的透明三角形

我怎么能做那样的事

---

如果

：悬停

或

：活动

则会出现三角形，并使背景可见。

您可以使用伪元素或内联块元素绘制旋转的正方形，并带有hudge box阴影，该颜色位于其外部以填充其父元素

---

HTML演示

<div>
  <h1>title</h1>
  <p> whatever next</p>
</div>

---

以下是一种仅限于CSS的方法：。（本例使用square.jpg图像仅用于演示-您可以将其替换为三角形的.png。）

以下是要点，假设三角形是一个图像文件，并附加到

标记**：

a {
    position: relative;
    width: 100%;
}

a:hover:before, a:focus:before {
    content: '';
    width: 16px; /* same as image width */
    height:16px; /* same as image height */
    display: inline-block;
    background: url('http://lorempixel.com/16/16/') center center no-repeat;  
    position: absolute;
    top: 0;
    left: 40%; /* adjust according to your design */
}

如果在px/em中设置了

标记的宽度，这将影响

:before

样式设置中

left

规则的值

---

**我见过一些人尝试将图像或样式附加到包裹在

周围的

标记上，但我更喜欢更改目标元素的样式。

只要有一个css悬停选择器，您可以在其中更改背景图像

mydiv:hover
{ 
background-image:url('mytraingle.png');
}

---

有一百万种方法可以回答您的问题，但我会先使用这个CSS选择器。也许这就是您所需要的。

请发布您尝试过的代码。我认为您可能需要使用SVG或剪切png掩码。如果不同的菜单项中有不同的背景？对不起，我的英语太差了，我不知道该怎么做。想法仅适用于图片，但我想尝试仅使用css）使用伪元素或额外元素，您可以做一些接近的操作，并添加过渡：悬停在白色框此处使用框阴影的技巧很有趣，但其限制是元素只能具有坚实的背景（而不是图像或渐变）。不过，如果我们只需要坚实的背景，它会很有用。@KingKing除非您使用绝对位置，然后使用边框图像，但这样您就很难维护、调整和释放一些浏览器兼容性至少还有另一种不使用边框图像的方法，但它很复杂（不容易维护）.@KingKing噢，上帝，你让我好奇@KingKing感谢您的演示，它确实有很多工作要做。干得好！

mydiv:hover
{ 
background-image:url('mytraingle.png');
}