我想创建一个菜单,我需要一个功能,如果有任何用户悬停菜单,那里将只有边框和边框底部。我想像梯形一样显示底部边框。
在我的情况下,我没有边界的div,它唯一的边界底部。
以下是我尝试过的内容:
#myDiv{
background: #FED;
border-bottom: 5px solid red;
}

<div id="myDiv">
My div, I want to make my border bottom like trapezoid.
</div>
&#13;
我怎样才能做到这一点?
答案 0 :(得分:3)
如果我得到你的正确,你想在#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>
答案 1 :(得分:1)
#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;
#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;