Rivnat Nasah Rivnat Nasah - 6 months ago 37
CSS Question

CSS - make border bottom shape like trapezoid

I want to create menu where I need a feature like if any user hover the menu there will be a border and the border bottom only. I want to display the bottom border like trapezoid.


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


Here is what I've tried:


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

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





How can I achieve this?

Answer

If I get your correctly, you want to set the border shaped as triangle trapezoid after #myDiv. This is basically how you can do it with 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>