Javascript 如何在导航栏中的悬停上添加颜色填充效果？又如何使节的末端或div稍微倾斜一点，使之成为一个小天使呢？

我在导航栏中使用了以下代码：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">Something Here</a>
                    </li>
                    <li>
                        <a href="#">Something else here</a>
                    </li>

                </ul>
            </li>
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">Link</a>
            </li>
        </ul>
    </div>

</nav>

以上代码用于简单的导航栏示例。因为我是stackoverflow的新手，名声不好，所以我不能在我的问题中添加图像

我可以使用CSS制作一个简单的悬停，但我想制作一个悬停，如果光标指向导航栏上的任何项目，就会产生一种效果，就像彩水在玻璃中填充一样

我也很好奇如何使部分或div的末端稍微倾斜一些角度

请参考以下链接：

---

我正试图制作一个导航栏和一个部分的结尾，就像这个模板一样。

您提到的模板使用以下CSS创建底部“斜面”：

.section {
  position: relative;
}

.section:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: -195px; /* the height of your image */
  left: 0;
  z-index: -1;
  height: 195px; /* the height of your image */
  background: url(path/to/your/image.png) no-repeat 50% 0%;
}

---

欢迎来到堆栈溢出！如果您可以发布单独的问题，而不是将您的问题合并为一个问题，这是首选。这样，它可以帮助人们回答你的问题，也可以帮助其他人寻找至少一个你的问题。谢谢哦，对不起！下次我会处理的。如果你能帮忙，请回答以上问题。谢谢。试试这个链接。这有许多使用CSS的悬停效果：
这个CSS包含图像权限的属性？但是，如果该部分只有文本，没有图像，我们还想使底部倾斜呢？是的。作为示例，您提供的模板使用图像创建斜面-如果没有其他图像，请使用与您所在区域背景匹配的纯色。我不需要解释。我检查了你答案上的绿色按钮：）