CSS - 使边框底部形状像梯形

Question

我想创建菜单，我需要一个功能，比如如果任何用户将鼠标悬停在菜单上，就会有边框和边框底部。我想像梯形一样显示底部边框。

In my case i don't have a div for border, its only border-bottom.

这是我尝试过的:

#myDiv{
  background: #FED;
  border-bottom: 5px solid red;
}

<div id="myDiv">
  My div, I want to make my border bottom like trapezoid.
</div>

我怎样才能实现这个目标？

Answer 1

如果我理解正确，您希望在#myDiv之后将边框形状设置为三 Angular 形梯形。这基本上就是你如何使用 css 做到这一点..

#myDiv:after {
  content: "";
  display: block;
  border-left: 1vw solid transparent;
  border-top: 10px solid red;
  border-right: 1vw solid transparent;
 }

<div id="myDiv">
  My div, I want to make my border bottom like triangle.
</div>