如何在菜单选项后面制作三角形悬停效果

Question

我正在尝试为菜单添加悬停效果 - 它应该很简单，但我还没有找到任何scss或css工作...下面是一个图像，具体显示我在说什么。

Answer 1

一个简单的linear-gradient会这样做：

.container {
 background:grey;
 padding:10px;
 }
.nav {
  display: inline-block;
  padding: 10px;
  color: #fff;
}

.nav:hover {
  background: linear-gradient(to bottom right, transparent 50%, red 51%);
}

<div class="container">
  <div class="nav">TEXT</div>
  <div class="nav">long TEXT</div>
  <div class="nav">A</div>
  <div class="nav">BBBBBBBBBBB</div>
</div>

Answer 2

虽然browser support Eh.

，但您可以使用剪辑路径来塑造三角形

button {
  background: #112b1bb8;
  border: 1px solid black;
  padding: 10px 40px;
  position: relative;
}

button:hover:before {
  content: '';
  width: 100%;
  height: 100%;
  background: grey;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}

<button>Brand</button>
<button>Link Link</button>
<button>O</button>