Question

如何使该箭头框具有响应性？

这是我现在的代码：

<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

它可以在桌面上正常工作，但是没有响应，有人可以帮助我使其响应吗？

Answer 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;
}

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

更新对容器使用vw单位（请参见CSS中的注释）：

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

想要使带有边框的箭头响应

1 个答案: