CSS에서 삼각형 표식 만들기

주 내비게이션 부분과 하위 내비게이션 부분이있는 사이트에서 작업하고 있습니다. 항목을 선택하면 선택한 목록 항목 아래에 삼각형이 표시됩니다. 삼각형은 아래 영역에서 오는 것처럼 보일 필요가 있습니다. 다른 말로 표현하면 다음과 같습니다.CSS에서 삼각형 표식 만들기

+------------------------------------+ 
| Parent 1  Parent 2  Parent 3 | 
+-----------------^------------------+ 
| Child 1  Child 2  Child 3 | 
+---------------------------^--------+ 
| Information goes here    | 
+------------------------------------+

나는 JSFiddle을 만들었습니다. 피들은 here입니다. 바이올린에서 몇 가지 문제가 있음을 알 수 있습니다. 첫째, 저는 삼각형을 만들 수 없습니다. 나는 현재 탭과 비슷한 모양을하고있다.

.mainSelected {  
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    text-align:center; 
}

다른 문제는 내가 바닥에 대한 삼각형 높이 얻는 방법을 알아낼 수 있다는 것입니다 : 사람들은 다음과 같습니다 일부 CSS를 통해 만들어졌다. 어쩌면 나는 그것에 대해 완전히 잘못 될 것입니다. 본질적으로, 나는 원래의 DIGG 디자인 (http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/11/digg-old-v3-subnavigation-menu.jpg)과 비슷한 것을하려고 노력하고있다.

도움 주셔서 감사합니다.

출처

2014-02-27 user687554

체크 아웃시 해당 게시물을 찾을 수 있습니다 - http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color – Evgeniy

this과 같은 문자를 사용해보세요.

.mainSelected { 
    text-align: center; 
    position: relative; 
} 

/* this is the actual triangle */ 
.mainSelected:after { 
    content: ' '; 
    width: 0; 
    height: 0; 
    display: block; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    position: relative; 
    left: 40%; 
}

가 여기서 일하는 당신은 왜 볼 수 있습니다 http://css-tricks.com/snippets/css/css-triangle/ 위쪽을 가리키는 삼각형은 다음과 CSS로 하나의 <div> 만들 수 있습니다

출처

2014-02-27 07:10:10 Roberto

.arrow-up-div { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 

    border-bottom: 5px solid black; 
}

사업부는 클래스가 arrow-up-div .

더 많은 정보와 삼각형 http://css-tricks.com/snippets/css/css-triangle/

출처

2014-02-27 11:00:12

CSS에서 삼각형 표식 만들기

답변

관련 문제