CSS - make border bottom shape like trapezoid

Question

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?

Possible duplicate of [How do CSS triangles work?](http://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — Justinas, Jun 01 '16 at 06:30
In my case i don't have a div for border, its only border-bottom. — , Jun 01 '16 at 06:31
I don't quite understand what you mean by *bottom border like triangle* - Can you include an image of the output you need? — Harry, Jun 01 '16 at 06:32
As i make a customized output from answer, I understand that my desired shape is `trapezoid and not a triangle`. Thanks @Harry — , Jun 01 '16 at 06:42
@Justinas, I change my question, Is it also the same Duplicate??? — , Jun 01 '16 at 06:49

choz · Accepted Answer · 2016-06-01T06:46:40.900

3

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>

edited Jun 01 '16 at 06:46

answered Jun 01 '16 at 06:33

choz

17,242
4
53
73

2

why he actually want this .. its looking really bad :P – Richa Jun 01 '16 at 06:34
1

Try not to use 50vw for left and right border, it adds horizontal scroll to a page. – Mario Plantosar Jun 01 '16 at 06:34
1

@Era I totally agree.. Did I miss anything to understand what the OP asked? – choz Jun 01 '16 at 06:35
something like this, not exactly – Jun 01 '16 at 06:35
I can't draw my output so i can't make my expected output. – Jun 01 '16 at 06:36
This is what i actually looking for: [https://jsfiddle.net/fgnp0thm/](https://jsfiddle.net/fgnp0thm/) – Jun 01 '16 at 06:37
1

So you need a trapezoid and not a triangle :D – Harry Jun 01 '16 at 06:38
@RivnatNasah Aw.. you can exactly edit my style since theyre using the same method. So, its NOT a triangle !!! – choz Jun 01 '16 at 06:39
1

Its my mistake, Thanks for quick response and help. – Jun 01 '16 at 06:39
@RivnatNasah No worries, glad it helped.. I'll just leave my answer be like a triangle as the question's title. – choz Jun 01 '16 at 06:39
1

@choz, can you please update your answer, I already update my question. – Jun 01 '16 at 06:44

Saika · Answer 2 · 2016-06-01T07:07:06.573

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

Hi Sayed, Please add HTML code,
My div, I want to make my border bottom like triangle.
, and see result on hover — Saika, Jun 01 '16 at 07:11

CSS - make border bottom shape like trapezoid

2 Answers2