화살표 표시 CSS 또는 기타

나는 많은 웹 사이트가이 같은 것을 사용하여에있는 페이지 또는 탭 나타내는 것으로 나타났습니다 : 당신이 볼 수 있듯이화살표 표시 CSS 또는 기타

enter image description here

, 작은 화살표가를 그 페이지 번호를 나타냅니다. 어떻게 순수한 CSS를 사용하여이 작업을 수행 할 수 있습니까? 아니면 대부분의 사이트에서 div의 배경 이미지를 사용하여 background-position 속성을 사용하여 위치를 설정합니까? 이것이 꽤 일반적인 기술 인 것처럼 보이기 때문에 앞에서 언급 한 내용이 다소 어려울 것으로 보입니다.

기타 예제 here 및 here을 볼 수 있습니다. 솔루션이 수평 및 수직으로 모두 작동하면 좋을 것입니다.

도움이 될 것입니다, 미리 감사드립니다!

출처

2012-05-10 jacktheripper

흠,'background-image'. 예. – VisioN

두 개의 CSS 클래스를 'li'(또는 'div'또는 * 현재 * 마커) 요소에 할당 할 수 있습니다. 하나는 일반 스타일로, 다른 하나는 배경 이미지 또는 원하는 장식을 설정합니다. – MilkyWayJoe

아마도 도움이 될 수 있습니다. http : // css-tricks.co.kr/snippets/css/css-triangle/ – undefined

CSS3를 통해 이것을 만들고 싶다면 웹 사이트가 최근에 빛을 발하게되어 필요한 CSS를 제공합니다.

가 살펴 유무 : 당신이 비록 크로스 브라우저 솔루션을 찾고 있다면 http://cssarrowplease.com/

를, 그것은 이전 답변 :

출처

2012-05-10 13:48:13 digitalclubb

그레이트 링크! 시원한 데모 :) – mtk

화살표는 거의 항상 이미지이지만, 일반적으로 CSS 클래스로 처리됩니다. 이 두 메뉴 항목을 글꼴을 줄 것이다하지만 하나는 당신은 또한 컨테이너에이 모두를 넣어 수있는 화살표 배경 를 얻을 수

<div class="menu">home</div> 
<div class="menu current">about</div>

CSS

.menu { 
Font: whatever; 
Background:url("image/parallel.PNG"); 
} 
.current { 
Background:URL("image/arrow.PNG"); 
}

그리고 HTML에서

는

예 스타일의 모든 하위 요소에 스타일을 적용한 다음 class = "current"를 현재 페이지에만 추가하면됩니다. 이 페이지 http://dynamicinteractions.com/home

에 대한

소스보기 내 전화 자동으로 모든 코드를 통해 캡을 수정 서하십시오.

출처

2012-05-10 13:45:34

답변을 주셔서 감사합니다. 다음과 같은 예제에서 어떻게 작동합니까? http://dribbble.com/shots/553791-Web-App-UI?list=tags&tag=ui – jacktheripper

자바 스크립트를 사용하는 팝업 메뉴입니다. CSS로 할 수 있지만 JavaScript로 훨씬 쉽게 할 수 있습니다. –

에 따라 배경 이미지를 고려 가치가있다 당신은 순수 CSS의 솔루션을하려는 경우, 이런 식으로 할 수 있습니다 :after 의사 요소를 사용하여 http://jsfiddle.net/darkajax/hGmxP/

출처

2012-05-10 13:49:34 DarkAjax

이 작업을 수행하려면 CSS 테두리를 사용할 수 있습니다. 다음과 같은 구조를 가지고있는 경우 는

<div class="menu">home</div> 
<div class="menu current">about</div> 
<div class="menu">Contact</div>

그런 다음 당신은 연설 거품을 그리거나 활성 메뉴에서 화살표에 다음 CSS를 사용할 수 있습니다

.current:after { 
    content: ''; 
    position: absolute; 

    width: 0; 
    height: 0; 

    border: 15px solid; 
    border-top-color: #292929; 

    top: 100%; 
    left: 50%; 
    margin-left: -15px; /* adjust for border width */ 
}

이 기술 http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

을 설명하는 좋은 튜토리얼입니다

출처

2012-05-10 13:53:16

화살표 표시 CSS 또는 기타

답변

관련 문제