2014-09-01 2 views
2

div 태그 뒤에 삼각형을 추가하고 싶습니다. 따라서 의사 요소 뒤에 css3을 사용했습니다. 하지만 작동하지 않습니다. 다음은 내 CSS 규칙입니다. 다음css3 ":: after"의사 요소가 작동하지 않습니다.

.header-wrapper .part1 ::after { 
    width: 0; 
    height: 0; 
    border-left: solid 48.35px #f21e1e; 
    border-bottom: solid 48.35px transparent; 
    border-top: solid 48.35px transparent; 
} 

생성 할 수있는 의사 요소에 대한 위해 내 HTML 부분

<div class="header-wrapper"> 
    <div class="part1"></div> 
</div> 

답변

5

, 당신은 specify a content value해야합니다. 그렇지 않으면 값이 기본값 인 none으로 가정됩니다. 이는 귀하의 경우에 작동하지 않는 이유 일 수 있습니다. 당신이 게시 CSS를 바탕으로 (example)

.header-wrapper .part1::after { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: solid 48.35px #f21e1e; 
    border-bottom: solid 48.35px transparent; 
    border-top: solid 48.35px transparent; 
} 

, 당신은 또한 .part1 ::after 사이의 공간을 제거해야합니다.

+0

질문에서'.part1'과':: after' 사이의 간격은 자식 선택자이므로 제거해야합니다. –

+1

모두 감사합니다! 문제를 해결할 수있었습니다. – CodeCanyon

관련 문제