CSS-使邊框底部形狀像梯形

Question

我想創建一個菜單，在其中我需要一個功能，例如，如果任何用戶將菜單懸停在菜單上，則邊框將只有邊框，底部只有邊框。 我想像梯形一樣顯示底部邊框。

就我而言，我沒有用於邊界的div，它的唯一邊界底部。

這是我嘗試過的：

 #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之后將邊框設置為 三角形 梯形。 基本上，這就是使用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

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

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

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