도면 탐색 화살표 모양 CSS를

Question

가 난 단지 CSS를 사용하여 탐색 화살표를 그리려고 사용하여, 나는 스타일

.outer { 
    width: 40px; 
    height: 40px; 
    border: 2px solid #000; 
    border-radius: 30px; 
    display: block; 
    position: relative; 
} 
.inner { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent #000 transparent transparent; 
    position: absolute; 
    right: 35%; 
    top: 24%; 
} 

이 코드

<span class="outer"> 
    <span class="inner"></span> 
</span> 

을 쓴하지만 난 내부 삼각형 수 원하는 이 <처럼 재생 버튼이 아닙니다. 코드를 공유했습니다. JSFiddle

Answer 1

의사 요소를 사용하여 이러한 종류의 모양을 얻을 수 있습니다.

유일한 단점은 top과 left 값을 알아야한다는 것입니다. 그들은 .inner의 크기에 비례하지 않습니다.

.outer { 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 2px solid #000; 
 
    border-radius: 30px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
.inner { 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 10px 15px 10px 0; 
 
    border-color: transparent #000 transparent transparent; 
 
    position: absolute; 
 
    right: 35%; 
 
    top: 24%; 
 
} 
 

 
.inner:after{ 
 
    content:''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 10px 15px 10px 0; 
 
    border-color: transparent #FFF transparent transparent; 
 
    position: absolute; 
 
    left: 5px; 
 
    top: -10px;  
 
}

<span class="outer"> 
 
    <span class="inner"></span> 
 
</span>

이 단순히 .inner의 상단에 같은 크기의 화살표를 배치,하지만 몇 픽셀을 통해 슬쩍 찔렀다. left 스타일을 증가시켜 화살표가 두꺼워 지도록하십시오.