How to resize trapezoid in CSS when browser window resize

Question

I'm trying to get the trapezoid shape resize when I resize browser's window. I was trying to do that by using box-resize but it still didn't work. Is it possible to do that with trapezoid defined/created by using border hack? What other way can I make trapezoid with the ability to resize when browser window is resized?

<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>

Welcome to SO mate! As it is your question was well explained, but I just made a few minor alterations to the code block formatting and the content with the intention of making it even better. Please feel free to rollback the edit if you feel any edit is incorrect/goes against the original meaning of your post. — Harry, Oct 29 '14 at 11:59
[This](http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643) is an answer I wrote sometime back. It doesn't use border hack to create trapezoid but may help you get an idea of alternate methods to achieve trapezoid shapes. — Harry, Oct 29 '14 at 12:02
Sure, thanks @Harry for well formating. Great example [link](http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643) — Karbox, Oct 29 '14 at 20:41

web-tiki · Accepted Answer · 2014-10-29T10:38:34.420

1

You can't apply percentage units to border but you can achieve your aim with vw units :

1/100th of the width of the v+iewport. (source : MDN)

DEMO

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>

note : I also moved your inline CSS to a seperate stylesheet as inline CSS isn't recomended.

vw units are supported by IE9+ see canIuse

edited Oct 29 '14 at 10:38

answered Oct 29 '14 at 10:31

web-tiki

99,765
32
217
249

Very helpful @web-tiki. And i've got next question, after i use trapezoid, is it a good solution to make divs look like this [link] (http://jsfiddle.net/j4u6bom1/15/) ?? How to better fit those elements, because now when i resize browser window, trapezoid does not fit at the top border?? – Karbox Oct 30 '14 at 09:11
Works fine:), but I use divs because later want to place some images (or canvas) or other elements in every div. Maybe my way of thinking about this solution with divs is not quite good, so I'm open to other solutions if they are more recomended or your knowledge and experience could help with this problem. – Karbox Oct 30 '14 at 13:42
@Karbox Maybe this approach is better for your project : http://jsfiddle.net/webtiki/khu4j1us/ If this doesn't suit you, I recomend asking a new question as it is different than the original question. – web-tiki Oct 30 '14 at 17:04
Yes, this could be useful. Truly thank @web-tiki. I set images to divs and then see how it works. – Karbox Oct 30 '14 at 20:25

How to resize trapezoid in CSS when browser window resize

1 Answers1

Linked