How to resize trapezoid in CSS when browser window

2019-07-24 20:07发布

站内文章 / HTML/CSS
14 0 0

问题:

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:

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



标签： html css responsive-design resize css-shapes
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~