Css:菜单悬停创建自定义形状背景图像？(使用css的平行四边形形状)

Question

我有导航html,并希望在悬停时添加图像像这个附件,如果菜单文本是长或短,它应该设置正确.如果正常图像在那里它可以设置但形状不同所以我怎么能设置这个？

有没有办法使用任何CSS进行这样的形状？

Answer 1

使用伪元素:before和:after

小提琴

.testClass:hover:before {
    content: '';
    position: absolute;
    top:0;
    left:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent beige transparent;

}
.testClass:hover:after {
    content: '';
    position: absolute;
    top:0;
    right:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 15px 0 0;
    border-color: beige transparent transparent transparent;

}