css 如何在路径形状中制作响应线

ktca8awb 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(115)

我有这些路径线，形式是okey与2k分辨率。和全高清，但在其他设备（更小，更大）的形状将不会移动响应。有没有办法让我的代码响应或有没有更有效的方法来做到这一点。
理想形状：

.line {
    display: flex;
    align-items: center;
  }
  .line span:first-child {
    white-space: nowrap;
  }
  .line b {
    flex: 1 0 0;
    height: 5px;
    background: black;
    margin: 0 5px;
    min-width: 25px;
  }
  .line1 {
    position: absolute;
    width: 5.2%;
    left: 36.2vw;
    top: 31.9%;
}
  .line2 {
    position: absolute;
    width: 15%;
    left: 40vw;
    top: 20%;
}

.line3 {
    position: absolute;
    width: 15%;
    left: 40vw;
    top: 45%;
}

.line4 {
    position: absolute;
    width: 26.1vh;
    left: 33.5%;
    top: 32.5%;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

<p class="line line1"><span></span><b></b>
<p class="line line2"><span></span><b></b>
<p class="line line3"><span></span><b></b>
<p class="line line4"><span></span><b></b>

css

来源：https://stackoverflow.com/questions/75359426/how-to-make-responsive-lines-in-path-shape

1条答案

按热度按时间

s6fujrry1#

一般的想法是将所有行 Package 到一个具有高度和宽度的relative容器中，这样行就可以根据容器定位。如果容器是整个页面，那么您将遇到这些问题。我已经整理了一些简单的示例。

.container {
      position: relative;
      height: 500px;
    }  
    .container p {
      margin: 0;
    }
    .line {
      position: absolute;
      background: black;
    }
    .line1 {
      width: 75%;
      height: 5px;
      bottom: 0;
      right: 0;
    }
    .line2 {
      width: 25%;
      height: 5px;
      top: 50%;
      left: 0;
    }
    .line3 {
      width: 75%;
      height: 5px;
      right: 0;
    }
    .line4 {
      position: absolute;
      height: 500px;
      width: 5px;
      left: 25%;
    }

<div class="container">
      <p class="line line1"><span></span><b></b>
      <p class="line line2"><span></span><b></b>
      <p class="line line3"><span></span><b></b>
      <p class="line line4"><span></span><b></b>
    </div>

请注意，您需要对这些值进行一些调整，以便获得您想要的确切结果。

赞(0）回复(0）举报 2023-02-10

我来回答

css 如何在路径形状中制作响应线

1条答案

相关问题

热门标签

最新问答