时间戳

首页 > 解决方案 > 为什么当我最小化窗口形状在 html 中移动时？

html - 为什么当我最小化窗口形状在 html 中移动时？

问题描述

我试图将一个八边形放在另一个八边形中，但问题是当我最小化网络浏览器的屏幕时，形状会移动，我希望你能帮助我解决这个问题，因为我不明白为什么会发生这种情况， 提前致谢

.octagonWrap {
    width: 400px;
    height: 400px;
    float: left;
    position: absolute;
    overflow: hidden;
    top: 10%;
    left: 20%;
  }
  
  .octagonWrapTwo {
    width: 300px;
    height: 300px;
    float: left;
    position: absolute;
    overflow: hidden;
    top: 270px;
    left: 241px;
  }
  
  .octagon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background: rgb(255, 255, 255);
    border: 3px solid rgb(0, 0, 0);
  }
  
  .octagontwo {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
    transform: rotate(45deg);
    background: rgb(255, 255, 255);
    border: 3px solid rgb(0, 0, 0);
  }
  
  .octagon:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
       * out the width of the border. It's currently -3px,
       * but if the border were 5px, then it'd be -5px.
       */
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
  }
  
  .octagontwo:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
       * out the width of the border. It's currently -3px,
       * but if the border were 5px, then it'd be -5px.
       */
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class='octagonWrap'>
        <div class='octagon'></div>
      </div>
      <div class='octagonWrapTwo'>
        <div class='octagontwo'></div>
      </div>
    </div>
</body>
</html>

所以这是代码片段中显示的代码，如果有人向我推荐一些东西，我将非常感激，谢谢！

标签： htmlcsswebshapes

解决方案

我认为这是因为百分比

.octagonWrap {
    ...
    top: 10%;
    left: 20%;
  }

如果屏幕是 1000px，top 就是 100px，如果屏幕是 2000px，top 就是 200px。

如果它们是特定的数字/像素，则位置将保持不变。本质上。

推荐阅读