자르기 삼각형

우리의 디자이너는하고 싶어 :자르기 삼각형

crop

을하지만이 삼각형 수확 할 수있는 좋은 방법을 알아낼 수 없습니다 : :after와

을 모든 너비와 삼각형을 만들기 위해 어떤 종류의 테두리 트릭을 사용합니다
큰 :after 요소가 회전되어 흰색이지만 다른 텍스트를 숨기면 안됩니다.
일부 마술 필터로 나는 모른다?
캔버스를 사용하여 JS로 잘라낸 다음 이미지를 base64 URL로로드 하시겠습니까? (아마 과장 : D)

당신은 어떻게 생각하십니까?

출처

2014-04-21 Dorian

: 경계 트릭 (또는 그라디언트)을 사용하여 수행해야합니다. – powerbuoy

편집 : 버전 2 : http://jsfiddle.net/mtaU8/4/은 bg 변경과 함께 작동합니다. 여기

나중에 이동 : http://jsfiddle.net/mtaU8/

HTML은 (. 나는 배경으로 div을 사용하지만, 당신은 쉽게 img 요소를 사용할 수 있습니다)

<div class="container"> 
    <div class="img"></div> 
</div>

CSS : (설정을위한 대부분 보풀 있지만, 기본적으로 :after 콘텐츠에 transform:rotate()을 사용하고 그림을 멋지게 잘 배치하도록 배치하십시오. 컨테이너에있는 모든 내용을 포함하면 잘 갈 수 있습니다.

.container { 
    width: 250px; 
    height: 100px; 
    position: relative; 
    overflow:hidden; 
} 
.img { 
    width: 250px; 
    height: 100px; 
    background-color: blue; 
    position: relative; 
} 
.img:after{ 
    content:""; 
    position: absolute; 
    width: 400px; 
    height:125px; 
    background-color: white; 
    top:90px; 
    left:-20px; 
    transform: rotate(5deg); 
    -moz-transform: rotate(5deg); 
    -webkit-transform: rotate(5deg); 

}

출처

2014-04-21 19:24:50 brentonstrine

예, 여기 있습니다 http://jsfiddle.net/viphalongpro/mtaU8/1/ 몸체의 단색 배경색은 이미지의 배경이나 그라데이션 배경이있는 경우에 불과합니다. 추악한 단색 (흰색) 색상 부분을 사용자에게 보여주는 것보다 더 좋게 만듭니다. –

예,': after' 요소는 배경 내용과 일치해야합니다. 배경이 바뀌면 작동하지 않습니다. 실물 모형에서 Dorian이 흰색 BG를 가지고있는 것처럼 보입니다. 너 더 나은 해결책이 있니, 킹 킹? 나는 도리안이 그것을 고맙게 여길 것이라고 확신한다. – brentonstrine

은 *** 오버플로 클리핑 기법에 대해 들어 본 적이없는 것처럼 보입니다. ***. 이 기술을 사용하면 별을 렌더링 할 수있는 것을 잘라낼 수 있습니다 (이미지 배경에서는 OK 임). –

나는 CSS 클립 속성을 사용하는 것이 좋습니다 것 :

.crop { 
    position: absolute; 
    clip: rect(110px, 160px, 170px, 60px); 
}

클립 속성의 rect 값이 잘립니다 이미지의 부분을 나타냅니다. 여기에 demo이 있습니다.

출처

2014-04-21 19:10:14

사각형이기 때문에 비스듬히 자르지 않습니다 ... – brentonstrine

모든 브라우저에서 적절한 클리핑 지원이 없습니다 –

[True] (http://caniuse.com/#search=css%20clip), 잘하면 그걸로 더 나아질거야. –

자르기 삼각형

답변

관련 문제