How to resize trapezoid in CSS when browser window

2019-07-24 20:01发布

站内问答 / HTML/CSS
837 1 5

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>

1条回答
我只想做你的唯一
2楼-- · 2019-07-24 20:50

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)