: 컨테이너의 의사 요소 앞에 흰색 테두리가 있습니다.

: before 및 : after 가상 요소를 사용하여 컨테이너에 대각선을 만듭니다.: 컨테이너의 의사 요소 앞에 흰색 테두리가 있습니다.

이러한 가상 요소에 흰색 아래쪽 테두리가있는 것처럼 보입니다. 설명 할 수없는 부분입니다.

코드는 다음과 같다 :

#sobre:before { 
    position: absolute; 
    display: block; 

    width: 100%; 
    height: 6em; 

    background: inherit; 

    content: ''; 

    transform: skewY(-2deg); 
    -webkit-transform: skewY(-2deg); 
    -moz-transform: skewY(-2deg); 
    -ms-transform: skewY(-2deg); 

    transform-origin: -100%; 
    -webkit-transform-origin: -100%; 
    -moz-transform-origin: -100%; 
    -ms-transform-origin: -100%; 
}

의 코드 1가 중첩를 들어 다음에 다른 변환 출처 및 Z 인덱스와 동일 다음 컨테이너.

출처

2016-12-15 Ricardo Jerónimo

문제를 설명하는 [mcve]를 게시 할 수 있습니까? –

가능한가요? : after 및 : before는 CSS의 다른 곳에서 정의되어 있습니까? #sobre에 border : none을 추가해보십시오. – Kantoci

이전에는 앤티 앨리어싱 또는 하위 픽셀 렌더링이 가능합니다. –

이것은 CSS 변환으로 인한 Chrome의 일반적인 안티 앨리어싱 문제이므로 :after 및 :before 요소에 -webkit-backface-visibility: hidden;을 추가하십시오.

출처

2016-12-15 15:26:57 Kantoci

일부 신뢰할만한 소스를 포함했다면이 대답은 훨씬 굉장했을 것입니다. –

: 컨테이너의 의사 요소 앞에 흰색 테두리가 있습니다.

답변

관련 문제