代码之家 › 专栏 › 技术社区 › Alex

HTML CSS伪选择器创建有角度的菜单项背景

pseudo-element css html

Alex · 技术社区 · 4 年前

很好的一天,

我有个问题。我想在我的菜单中创建以下内容:

我用一个照片编辑程序做了这个。

因为我现在拥有的是:

现在我写的问题似乎是懒人的问题。关键是,当我在网上搜索伪选择器时,我只看到了如何创建箭头或三角形。但这不是我想要的。

也许我没有使用正确的搜索短语。但我希望有人能帮我。因为我不知道从哪里开始我想要的。还是我应该再次使用图像?(不希望如此)

提前感谢:-)

这是我目前的代码:

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover::before {
visibility: visible;
background-color: #02619a;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);

}

.ftco-navbar-light .navbar-nav > .nav-item.active > a::before {
    visibility: visible;
    background-color: #02619a;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

就像我说的。那里做得不多。因为我不知道从哪里开始。