tss 태그 안의 순수한 화살표

Question

테이블이 있습니다. 그 테이블 안에는 "화살"이라는 클래스가 있습니다. 이 클래스를 가진 td의 경우 해당 td의 왼쪽 테두리에 화살표 (삼각형)를 넣고 싶습니다. 나는 그것을 달성하기 위해서만 CSS를 사용하고 싶습니다. 화살표가 위쪽 테두리 아래에서 시작하여 아래쪽 테두리 위로 끝나기를 바랍니다. 나는 인터넷에서 찾은 몇 가지 "순수한 CSS 화살표 튜토리얼"을 적용하려고했지만 td에서 작동하도록 관리하지 않습니다. 나는 분명히 희망하고 누군가 도움이되기를 바랍니다. 답장을 미리 보내 주셔서 감사합니다. 건배. 마크.

http://cssdesk.com/PzASe

내 HTML :

<table> 
    <tr> 
    <td>td1</td> 
    <td class="arrow">td2</td> 
    <td class="arrow">td three</td> 
    </tr> 
    <tr> 
    <td>td4</td> 
    <td class="arrow">td five</td> 
    <td class="arrow">td6</td> 
    </tr> 
</table> 

내 CSS :

table{ 
    border-spacing: 0px; 
    border-collapse: collapse; 
    text-align:center; 
    vertical-align:middle;} 

td{ 
    padding:10px; 
    border:1px solid purple;} 

.arrow:before { 
    content:''; 
    position: relative; 
    top: 0; 
    left: -10; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-left: 5px solid black; 
} 

Answer 1

에서 볼 삼각형 같은 모양을 그리기위한 CSS 기술의 대부분은 삽입 새로운 요소, 고급 CSS 속성과 같은 것들을 포함한다 (읽기 : 작동하지 않습니다 IE에서), 나는 총알을 물고 구식 배경 이미지를 사용하는 것이 좋습니다.

개념 증명으로 사용하고 있으며 방문자가 어떤 브라우저를 사용하고 있는지 신경 쓰지 않는다면 보았습니다 this tutorial on CSS tricks?

당신은 그 안에 <div>을 삽입해야합니다. 다음과 같이 스타일을 적용하십시오.

.arrow div { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid blue; 
} 

Answer 2

이 CSS를보십시오. 귀하의 td은 가운데 정렬되어있어 화살표 앞에 홀수 번째 공간이 추가되었습니다. ? (이 귀하의 타겟 고객이다 여기에서 행동 css code

table{ 
    border-spacing: 0px; 
    border-collapse: collapse; 
    text-align:center; 
    vertical-align:middle;} 

td{ 
    padding:10px; 
    border:1px solid purple;} 

.arrow:before { 
    content:''; 
    position: relative; 
    top: 0; 
    left: -10; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-left: 5px solid black; 
} 
.arrow { 
    text-align:left; 
}