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

Question

我想创建一个菜单，我需要一个功能，如果有任何用户悬停菜单，那里将只有边框和边框底部。我想像梯形一样显示底部边框。

  

在我的情况下，我没有边界的div，它唯一的边界底部。

以下是我尝试过的内容：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我怎样才能做到这一点？

Answer 1

如果我得到你的正确，你想在#myDiv之后设置形状为 triangle 梯形的边框。这基本上就是你如何使用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>

Answer 2

＆＃13;

＆＃13;

#myDiv {
		
		position: relative;
		display: inline-block;
	}
#myDiv:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    left: 50%;
    position: absolute;
    margin-left: -10px;
    bottom:-20px;
    display: none;
 }
 #myDiv:hover {
 	border-bottom: 3px solid #f00;
 }
 #myDiv:hover:after {
 	display: block;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

#myDiv {
	 position: relative;
	 display: inline-block;
	}
#myDiv:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    left: 50%;
    position: absolute;
    margin-left: -10px;
    bottom:-20px;
    display: none;
 }
 #myDiv:hover {
 	border-bottom: 3px solid #f00;
 }
 #myDiv:hover:after {
 	display: block;
 }

＆＃13;

＆＃13;

＆＃13;