想让带边框的箭头响应答案

【问题标题】：Want to make the arrow with border responsive想让带边框的箭头响应
【发布时间】：2019-01-16 09:57:46
【问题描述】：

如何让这个箭头框响应？

这是我现在的代码：

<div class="arrow-box"></div>

.arrow-box {
    border-bottom: 0;
    position: relative;
    background: #fff;
    border: 1px solid #13aac5;
    border-bottom: 0;
    width: 1000px;
    height: 240px;
    box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
    &:before {
        position: absolute;
        bottom: -63px;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 62px 501px 0 501px;
        border-color: #13aac5 transparent transparent transparent;
        content: '';
    }
    &:after {
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 62px 500px 0 500px;
        border-color: #fff transparent transparent transparent;
        content: '';
        bottom: -62px;
    }

}

你可以看看这个fiddle

它在桌面上按预期工作，但没有响应，谁能帮我让它响应？

【问题讨论】：

您正在为宽度使用硬编码的基于像素的值。只需将这些替换为基于百分比的值即可。
@ObsidianAge 我已将百分比值放在媒体查询中箭头的边框宽度上，但它不起作用。
我建议使用嵌入的 SVG 图像作为箭头，而不是尝试使用 CSS 构建它
@Flying 我已经尝试过使用背景图片，但是因为我必须在其中放置一些段落和项目列表，并且背景图片没有正确响应，所以我必须处理它使用 CSS。
@vinnlee 实际上，可以不为整个元素应用背景图像，而只为::after 应用背景图像，它代表元素下方的箭头。它将使您的主要元素独立于图像，但允许您创建所需的箭头。

标签： html css sass responsive-design

【解决方案1】：

您可以使用vw 单位，即视口宽度的百分比。
Read more。

.arrow-box {
  border-bottom: 0;
  position: relative;
  background: #fff;
  border: 1px solid #13aac5;
  border-bottom: 0;
  width: 96vw;
  height: 240px;
  margin:auto;
  box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
}

.arrow-box:before {
  position: absolute;
  bottom: -63px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 48vw 0;
  border-color: #13aac5 transparent transparent transparent;
  content: '';
}

.arrow-box:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 48vw 0;
  border-color: #fff transparent transparent transparent;
  content: '';
  bottom: -62px;
}

&lt;div class="arrow-box"&gt;&lt;/div&gt;

更新将vw 单元与容器一起使用（参见 CSS 中的 cmets）：

.container {
  width: 80vw; /* say we want to have it 80% of our viewport */
}

.arrow-box {
  border-bottom: 0;
  position: relative;
  background: #fff;
  border: 1px solid #13aac5;
  border-bottom: 0;
  width: 76vw; /* it should be little less than .container because of shadow
                * or you may set it more precizely with calc(80vw - 42px)  */
  height: 240px;
  margin: auto;
  box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
}

.arrow-box:before {
  position: absolute;
  bottom: -63px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 38vw 0; /* 50% of .arrow-box width */
  border-color: #13aac5 transparent transparent transparent;
  content: '';
}

.arrow-box:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 38vw 0;
  border-color: #fff transparent transparent transparent;
  content: '';
  bottom: -62px;
}

<div class="container">
  <div class="arrow-box"></div>
</div>

【讨论】：

请再回答我一个小问题:)。如果我把它放在一个宽度为 1000px 的容器中，那么我如何计算它的 vw？
@vinnlee，您还必须使用vw 单位设置“容器”宽度，并相应地更新arrow-box 参数。请参阅我的答案中的更新。