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

时间:2016-06-01 06:27:53

标签: css css3

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

  

在我的情况下,我没有边界的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;
&#13;
&#13;

我怎样才能做到这一点?

2 个答案:

答案 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)

&#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;