브라우저 창의 크기를 조정할 때 CSS의 사다리꼴 크기를 조정하는 방법

브라우저 창의 크기를 조정할 때 사다리꼴 모양의 크기를 조정하려고합니다. box-resize을 사용하여이를 시도했지만 여전히 작동하지 않았습니다. border 해킹을 사용하여 사다리꼴 정의/생성이 가능합니까? 다른 방법으로 브라우저 창 크기를 조정할 때 크기를 조정할 수있는 사다리꼴을 만들 수 있습니까?브라우저 창의 크기를 조정할 때 CSS의 사다리꼴 크기를 조정하는 방법

<body style="position:relative;height:500px;"> 
    <div id="personal" style="position:relative; 
     background-color: red; 
     width:100%; 
     height:100%;"> 
     <div id="floor" style="position:absolute; margin-top:10px; 
      border-bottom: 300px solid black; 
      border-left: 565px solid transparent; 
      border-right: 570px solid transparent; 
      height: 10%; 
      width: 100%;"> 
     </div> 
    </div> 
</body>

출처

2014-10-29 Karbox

에 오신 것을 환영합니다 IE9 + see canIuse에 의해 지원됩니다! 귀하의 질문은 잘 설명되어 있지만, 코드 블록 서식 및 내용을 약간 변경하여 더 나은 것으로 만들려고합니다. 편집 내용이 잘못되었다고 느껴지면 게시물을 원래대로 되돌릴 수 있습니다. – Harry

[This (http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643)는 제가 언젠가 다시 쓴 대답입니다. 그것은 사다리꼴을 만들기 위해 경계선 해킹을 사용하지 않지만 사다리꼴 모양을 얻기위한 다른 방법에 대한 아이디어를 얻는 것을 도울 수 있습니다. – Harry

물론, 잘 formating위한 @ 해리. 좋은 예 [link] (http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643) – Karbox

당신은 국경 비율 단위를 적용 할 수 있지만 vw 단위로 목표를 달성 할 수는 V + iewport의 폭

1/100을.

body { 
 
    position:relative; 
 
    height:500px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#personal { 
 
    position:relative; 
 
    background-color: red; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#floor { 
 
    position:absolute; 
 
    top:10px; 
 
    border-bottom: 300px solid black; 
 
    border-left: 19vw solid transparent; 
 
    border-right: 19vw solid transparent; 
 
    height: 10%; 
 
    width: 60vw; 
 
}

<body> 
 
    <div id="personal"> 
 
     <div id="floor"></div> 
 
    </div> 
 
</body>

참고 DEMO

(source : MDN)
는 : 인라인 CSS를 사용하지 않는 것이 좋습니다 나는 또한 별도의 스타일 시트에 인라인 CSS를 옮겼습니다.

vw 단위 SO 짝짓기를

출처

2014-10-29 10:31:24

매우 유용한 @ web-tiki. 사다리꼴을 사용하고 나면 divs를 다음과 같이 만들 수있는 좋은 해결책입니까? (http://jsfiddle.net/j4u6bom1/15/) ?? 내가 브라우저 창 크기를 조정할 때 사다리꼴이 위쪽 테두리에 맞지 않기 때문에 그 요소에 더 잘 어울리는 방법 ?? – Karbox

@Karbox 어때? http://jsfiddle.net/webtiki/z8d1rhk3/? –

잘 작동합니다. :) 그러나 나중에 모든 이미지 나 캔버스 또는 다른 요소를 모든 div에 배치하려고하므로 div를 사용합니다. 어쩌면 div와 함께이 솔루션에 대한 생각의 내 방식은 꽤 좋지 않다, 그래서 그들은 더 이상 권장하거나 당신의 지식과 경험이 문제를 도울 수 있다면 다른 솔루션을 열어. – Karbox

브라우저 창의 크기를 조정할 때 CSS의 사다리꼴 크기를 조정하는 방법

답변

관련 문제