테두리 색 (img 포함)

이미지 테두리가 삼각형 모양 일 수 있습니까? 나는이 같은 내 삼각형을 만드는 오전 순간테두리 색 (img 포함)

.triangle { 
    display: block; 
    margin: 0 auto; 
    height: 51px; 
    width: 103px; 



&:after { 
     content: ""; 
     display: block; 
     border: inset 52px; 
     border-color: rgba(51, 51, 51, 0.4) transparent transparent transparent; 
     border-top-style: solid; 
    } 
}

만들려면 예를 들어 빨간색 내가 할 border-color: #ae1800 transparent transparent transparent; 하지만 어떻게 배경 이미지로 색상을 대체 할 수 있을까?

감사합니다.

출처

2014-04-15 Kiwimoisi

예제 이미지를 게시 할 수 있습니까? 나는 그것을 얻지 않는다. 그리고 아마도 이미 시도한 예제와 함께 codepen. –

기본적으로 삼각형 모양, 높이 51px 너비 103px를 만듭니다. 색상은 테두리 색상으로 정의되며 투명한 오른쪽 하단은 기본적으로 삼각형이됩니다. – Kiwimoisi

예 : http://codepen.io/anon/pen/mrELa/. 그러나 나는 정말로 얻지 못합니다, 왜 당신이 국경에서 이미지를 사용하고 싶습니까? 그냥 배경 이미지를 놓으세요 ...? –

가장 좋은 방법은 포토샵과 같은 테두리로 이미지를 만든 다음 삼각형 외부의 투명한 배경으로 만드는 것입니다. 그것을 대신 JS를 사용하여 표시 CSS를 사용하여.

도움이 되었기를 바랍니다.

출처

2014-04-15 06:55:19 KM123

테두리 색 (img 포함)

답변

관련 문제