CSS 전체 테두리 위로?

내 div은 left 및 right 경계보다 다른 border-top 색이 있습니다.CSS 전체 테두리 위로?

예 :

div{ 
    width: 100px; height: 100px; 
    border-top: blue 20px solid; 
    border-left: red 20px solid; 
    border-right: red 20px solid; 
}

그러나 아래 왼쪽 그림과 같이 테두리의 모서리 tringle 모양이 될 :

CSS Border Problem

가 나는 등 전체 폭에 걸쳐하는 border-top을 원하는 위의 오른쪽 이미지.

어떤 속임수로 해결할 수 있습니까?

감사

출처

2013-03-16 hrsetyono

http://stackoverflow.com/questions/13459985/border-을 모서리 - 삼각형 – gmartellino

가능한 [45도 각도 대신 90도로 끝나는 CSS 테두리 설정] (h ttp : //stackoverflow.com/questions/7261703/set-css-border-to-end-in-a-90-instead-of-a-45-degree-angle) –

감사합니다. 나는 ' :: after'와':: before' – hrsetyono

이 당신에게 원하는 결과 고브 것 :

HTML

<div id="a"><div id="b"></div></div>

CSS

div#a { 
    border-top: blue 20px solid; 
    width: 140px; 
} 
div#b { 
    height: 100px; 
    border-left: red 20px solid; 
    border-right: red 20px solid; 
}

출처

2013-03-16 09:01:59 aorcsik

고마워요. 그러나 나는 [이 트릭] (http://stackoverflow.com/a/13460111/1318622)을 선호합니다. – hrsetyono

CSS 전체 테두리 위로?

답변

관련 문제