아래쪽 화살표가있는 HTML 줄

Question

첨부 된 이미지 에서처럼 아래쪽을 가리키는 작은 화살표가있는 선을 그리려합니다.

나는 아래쪽 화살표를 얻을 수 없었다. 내가 HTML과 CSS를 사용하여 그것을 할 수있는 방법이 있습니까?

HTML

<hr class="line"> 

CSS

.line{ 
width:70%; 
color:red; 
} 

http://jsfiddle.net/4eL39sm1/

감사합니다.

Answer 1

당신은 의사 요소를 사용할 수 있습니다

:after 및 :before : 당신은 border-width와 함께 재생할 수 있습니다

.line { 
 
    width:70%; 
 
} 
 
.line:after { 
 
    content:''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 7px 7px 0; 
 
    border-color: #FFFFFF transparent; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    top: 8px; 
 
    left: 45%; 
 
} 
 
.line:before { 
 
    content:''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 7px 7px 0; 
 
    border-color: #7F7F7F transparent; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    top: 9px; 
 
    left: 45%; 
 
}

<hr class="line">

사용자의 요구에 크기를 조절합니다.