중간에 Chevron이있는 CSS 서클 전환

here과 같은 재생 버튼을 얻고 싶습니다. 그러나 국경에서 나가는 놀이 단추보다는 나는 쉐브론의 오른쪽이되고 싶습니다. 그러나이 두 가지 모두는 내가 완전히 이해하지 못하는 :before과 :after을 사용합니다.중간에 Chevron이있는 CSS 서클 전환

누군가 내가 그 의사 선택기가 무엇인지 설명하고 오른쪽 지시기를 가르쳐 주시겠습니까? 그 예를 합치려고합니다. this chevron codepen

모든 것이 끝났을 때 저는 이렇게 보이기를 바랍니다. 나는 첫 번째 예제에서 좋은 trasition을 얻는 것이 정말 멋지다고 생각했습니다.

출처

2016-07-08 9er

쉐브론을 기반으로 요청한 결과, 이것이 내가 생각해 낸 것입니다. 국경 무게와 위치와 같은 세부 사항을 다시 조정해야 할 수도 있습니다.

.chevron { 
 
    display: inline-block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    border: 0.25em solid #333; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
} 
 

 
.chevron::after { 
 
\t border-style: solid; 
 
\t border-width: 0.25em 0.25em 0 0; 
 
\t content: ''; 
 
\t display: inline-block; 
 
\t height: 0.45em; 
 
\t /*left: 0.15em;*/ 
 
\t position: relative; 
 
\t top: 0.15em; 
 
\t transform: rotate(-45deg); 
 
\t vertical-align: middle; 
 
\t width: 0.45em; 
 
} 
 

 
.chevron.right:after { 
 
\t left: 0; 
 
\t transform: rotate(45deg); 
 
} 
 

 
.chevron.bottom:after { 
 
\t top: 0; 
 
\t transform: rotate(135deg); 
 
} 
 

 
.chevron.left:after { 
 
\t left: 0.25em; 
 
\t transform: rotate(-135deg); 
 
}

<p>Chevron (top) <span class="chevron top"></span> 
 
<p>Chevron (right) <span class="chevron right"></span> 
 
<p>Chevron (bottom) <span class="chevron bottom"></span> 
 
<p>Chevron (left) <span class="chevron left"></span>

출처

2016-07-08 03:04:46 Maki

다른 사람이 더 잘 설명 할 수는 있지만 CSS에서 html 요소를 생성하는 것과 비슷합니다.

"___"의 모든 요소에 대해 시작 부분 (: 앞) 또는 끝 (: 뒤)에 이름없는 하위 요소를 추가하고 다음과 같이 스타일을 지정하십시오. ". 이 시점에서 그들이 나타나는 순서 이외에 ': before'와 ': after'사이에는 차이가 없다는 점에 유의할 가치가 있습니다.

실질적으로 다른 요소와 다른 유일한 방법은 'content'속성을 지정해야한다는 것입니다 (심지어 빈 ''인 경우에도). 당신이 .PNG 이미지로 갈매기가 있다면

그래서 예를 들어, :

.circle{ 
    position: relative; 
    height: 100px; 
    width: 100px; 
    border-radius: 100px; 
    border: 2px solid #fff; 
} 
.circle::after{ 
    content:''; 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    margin: auto; 
    height: 50px; 
    width: 50px; 
    background-image: url('../path/chevron.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
}

다른 대안은 다음과 같습니다

대신 배경 -의 '>'에 대한 내용을 설정 이미지 솔루션.
: after 요소의 스타일을 삼각형으로 지정하려면 배경 이미지 솔루션 대신 css trick을 사용하십시오.

전환은 별도의 문제입니다. 그 분들과 도움이 필요하시면 알려주세요.

출처

2016-07-08 02:59:44

중간에 Chevron이있는 CSS 서클 전환

답변

관련 문제