Question

边框500px是固定的。如何使其响应？它位于.page1 :: before area。

.page1{
    width:100%;
    height:auto;
    clear:both;
    padding:90px 0 40px 0;
    background-color:#0D9DDA;
    position:relative;
}
.page1::before{
    content:"";
    width:0;
    height:0;
    display:block;
    border-width:80px 500px 0px;
    border-style:solid;
    border-color:#0D9DDA transparent transparent ;
    position:absolute;
    top:100%;
    left:0;
    z-index:5;
}

<div class="page1"></div>

Answer 1

将像素更改为灵活单位，如vw（视口宽度）或％。（您需要更改所有像素单位）

所以，如果你想在1920px宽显示器上500px 500 / 1920~ = 26vw

Answer 2

设置显示大小标准说30em，并添加css代码如下。当然需要进一步调整以使其正确。

[![/* Responsive <  30em */
@media all and (max-width:  29.9375em){

.page1{width:100%;
   height:auto;
   clear:both;
   padding:90px 0 40px 0;
   background-color:#0D9DDA;
   position:relative;
   }
.page1::before{content:"";
           width:0;
           height:0;
           display:block;
           border-width:40px 200px 0px;
           border-style:solid;
           border-color:#0D9DDA transparent transparent ;
           position:absolute;
           top:100%;
           left:0;
           z-index:5;
}
 }
/* larger display  > 30em*/
@media all and (min-width:  30em){

 .page1{width:100%;
   height:auto;
   clear:both;
   padding:90px 0 40px 0;
   background-color:#0D9DDA;
   position:relative;
   }
.page1::before{content:"";
           width:0;
           height:0;
           display:block;
           border-width:80px 500px 0px;
           border-style:solid;
           border-color:#0D9DDA transparent transparent ;
           position:absolute;
           top:100%;
           left:0;
           z-index:5;
}
}][1]][1]

我想让标记区域响应

2 个答案: