클립 경로없이 엉성한 사각형을 만들려고합니다.

위쪽 테두리가 비뚤어지고 오른쪽 테두리가 왼쪽으로 비뚤어지고 왼쪽에서 오른쪽, 아래쪽이 똑바로 유지되어야하는 상자를 만들려고합니다. 그것은 다음과 같이해야합니다 나는 클립 경로를 사용하여이 작업을 수행 할 수 클립 경로없이 엉성한 사각형을 만들려고합니다.

하지만 (즉 & 오페라 이전 버전의 브라우저와 같은) 더 많은 브라우저에 대한 호환성을 갖고 싶어.

어쩌면 인라인 SVG를 사용하는 것이 좋겠지 만 SVG에서는 높이를 지정해야하며 상자의 높이가 내용 (동적)으로 정의되도록하고 싶습니다.

출처

2016-06-20 Rami

[여기]를보고 (http://stackoverflow.com/questions/36756081/css-skew-img-frame-without-distorting-image/36756497#36756497)가하시기 바랍니다, 나는 당신이 제공된 답변에서 충분히 찾을 것이라고 생각합니다. –

내 이미지를 모방하려는 시도입니다.

JsFiddle

<!DOCTYPE HTML><html><head><meta charset="utf-8"> 
<title>Slanted Borders</title> 
<meta name="generator" content="PSPad editor, www.pspad.com"> 
<style> 
.slanted{ 
    display:block; 
    position:relative; 
    margin:50px auto; 
    padding:20px 20px 0; /* border space */ 
    width:600px; 
    overflow:hidden; 
} 
.slanted:before, 
.slanted:after, 
.slanted-top:before{ 
    position:absolute; 
    top:20px; 
    left:0; 
    border:solid transparent; 
    border-top-color:tan; 
    border-width:600px 0 0 20px; /* left border (top as max box height) */ 
    width:0; 
    height:0; 
    content:"\a0"; 
} 
.slanted:after{ 
    right:0; 
    left:auto; 
    border-width:600px 20px 0 0; /* right border (top as max box height) */ 
} 
.slanted-top:before{ 
    position:absolute; 
    top:0; 
    border-color:transparent; 
    border-left-color:tan; 
    border-width:20px 0 0 640px; /* top border width+padding (right as box length) */ 
} 
.slanted-top{ 
    padding:10px; 
    background:tan; /* background-color same as borders */ 
} 
.slanted p{ 
    margin:1em; 
} 
.slanted a{ 
    display:block; 
    margin:1em; 
} 
.slanted a:hover{ 
    height:20em; 
} 
</style> 
</head><body> 
  
<div class="slanted"> 
    <div class="slanted-top"> 
     <p>Slanted Borders</p> 
     <a href="#nogo">Hover to expand</a> 
    </div> 
</div> 
  
</body></html>

출처

2016-06-21 06:38:06

감사합니다. 내가 이것을 어떻게 성취 할 수 있었는지 알아 내려고 노력했다. – Rami

클립 경로없이 엉성한 사각형을 만들려고합니다.

답변

관련 문제