我想让标记区域响应[重复]答案

【问题标题】：I want to make the marking area it responsive [duplicate]我想让标记区域响应[重复]
【发布时间】：2016-08-23 17:30:47
【问题描述】：

500px 的边框是固定的。如何让它响应？它位于 .page1::before 区域。

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

【问题讨论】：

基本上..不带边框...倾斜的伪元素、SVG 或其他东西。我确定这已经出现过，请尝试在 SO 上更加努力地搜索。
这里..stackoverflow.com/questions/25360411/…
其实也和stackoverflow.com/questions/36392688/…类似

标签： html css css-shapes

【解决方案1】：

设置显示尺寸标准，例如 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]

【讨论】：

所有常见的东西都应该从@media规则中删除；比如.page1{width:100%; height:auto;等，而不是全部复制。

【解决方案2】：

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

所以如果你想在 1920 像素宽的显示器上显示 500 像素 500/1920 ~= 26vw

【讨论】：

是的。大众技术工作。谢谢