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 { 
 
\t \t 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 
#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 { 
 
    \t border-bottom: 3px solid #f00; 
 
} 
 
#myDiv:hover:after { 
 
    \t display: block; 
 
}

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

#myDiv { 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t } 
 
#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 { 
 
    \t border-bottom: 3px solid #f00; 
 
} 
 
#myDiv:hover:after { 
 
    \t display: block; 
 
}

의