이것은 이미 묻지 만 다른 방법으로 사용해야합니다.CSS (3) & HTML 자르기 가장자리
문제 : 다음 탐색 내가 실현하려고 줄 볼 수 아래 이미지를 살펴 제발
- 그림자
- 그림 주위의 1 픽셀 단색 경계선이 좋음
물론 tatic 이미지가 이것을 할 수는 있지만 다른 것을 사용하고 싶습니다. 가능한 한 많은 브라우저 지원을 통해 아이디어를 얻으시겠습니까?
편집 : <nav>
은 절대
위치입니다 내가 지금까지
무슨 짓을하지만 테두리를 적용 할 수 없습니다와 고정 크기도 문제가있다.
nav {
float: left;
position: absolute;
background-color: #ffffff;
top: 0;
left: 0;
display: inline;
padding: 12px;
padding-right: 0;
width: auto;
}
.behind_nav {
height: 60px;
width: 523px;
position: absolute;
top: 0;
left: 0;
border-right: 20px solid transparent;
border-top: 48px solid white;
}
.behind_nav
는 <nav>
(놀랍게도) 뒤에있다. 실제로 이것은 위에서 언급 한 그림자 및 경계 문제를 제외하고는 잘 작동합니다. 또한 문제가되는 고정 값에 바인딩됩니다. <nav>
내용에 너비가 맞습니다 (CMS 데이터/브라우저로 인해 다를 수 있음)
기존 답변은 이미 매우 훌륭하며 질문이 제기 된 이후로 꽤 오래되었습니다.하지만 [이 답변] (http://stackoverflow.com/questions/15724678/creating-an)을 참조하십시오. - 이꼴 - 사다리꼴 모양) 다른 접근법 (이 질문에 맞게 조정해야 함). – Harry