当前位置： 文江博客话题详情

是否可以在CSS中构建以下设计？

发布于 2025-02-09 17:29:35 字数 3170 浏览 2 评论 0原文

我一直在尝试使用html/css构建以下设计：

​

​png“ rel =” nofollow noreferrer“> ”

但是现在我已经卡住了，没有自最近两天以来取得了进展 - 所以我正在寻求帮助！

另外，是否有可能做出响应？

为了实现上述我，我编写了以下代码：

.contain {
  position: absolute;
  height: 400px;
  width: 700px;
  left: 5%;
}

.hex {
  position: absolute;
  width: 125px;
  height: 200px;
  border-radius: 25px;
  background: green;
}

.hex:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transform: rotate(60deg);
  background: green;
}

.hex:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transform: rotate(-60deg);
  background: green;
}

.innerHexagon {
  width: 100px;
  height: 152px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: green;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  border-radius: 20px;
}

.innerHexagon:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  transform: rotate(60deg);
  background: green;
  border-radius: 20px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.innerHexagon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  transform: rotate(-60deg);
  background: green;
  border-radius: 20px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.test {
  position: absolute;
  width: 1600px;
  /*width: 400px;*/
  height: 200px;
  z-index: -1;
  border-right: 0px;
  background: grey;
  border-radius: 30px;
}

.test:before {
  position: absolute;
  content: '';
  width: 140px;
  /*width: 35%;*/
  height: 100%;
  transform: rotate(60deg);
  left: 1460px;
  /*left: 260px;*/
  border-radius: 30px;
  background: grey;
}

.test:after {
  position: absolute;
  content: '';
  width: 140px;
  /*width: 35%;*/
  height: 100%;
  transform: rotate(-60deg);
  left: 1460px;
  /*left: 260px;*/
  border-radius: 30px;
  background: grey;
}

.text {
  padding-top: 25px;
  padding-left: 50px;
  font-size: xx-large;
  font-family: sans-serif;
  color: Black;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style1.css">
</head>

<body>


  <div class="contain">
    <div class="hex">
      <div class="innerHexagon" style="z-index:1">

      </div>
    </div>
    <div class="test">
    </div>
    <div class="hex" style="left: 500px">
      <div class="innerHexagon" style="z-index:1">

      </div>
    </div>
    <div class="hex" style="left: 1000px">
      <div class="innerHexagon" style="z-index:1">

      </div>
    </div>

  </div>

</body>

</html>

原文

I have been trying to build the following design using html/css:

enter image description here

So far I have been able to achieve the following:

enter image description here

but now I'm stuck and have not made progress since the last 2 days - so I am looking for help!

Also, is it possible to make this responsive?

To achieve the above I have written the following code:

.contain {
  position: absolute;
  height: 400px;
  width: 700px;
  left: 5%;
}

.hex {
  position: absolute;
  width: 125px;
  height: 200px;
  border-radius: 25px;
  background: green;
}

.hex:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transform: rotate(60deg);
  background: green;
}

.hex:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 25px;
  transform: rotate(-60deg);
  background: green;
}

.innerHexagon {
  width: 100px;
  height: 152px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: green;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  border-radius: 20px;
}

.innerHexagon:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  transform: rotate(60deg);
  background: green;
  border-radius: 20px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.innerHexagon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  transform: rotate(-60deg);
  background: green;
  border-radius: 20px;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.test {
  position: absolute;
  width: 1600px;
  /*width: 400px;*/
  height: 200px;
  z-index: -1;
  border-right: 0px;
  background: grey;
  border-radius: 30px;
}

.test:before {
  position: absolute;
  content: '';
  width: 140px;
  /*width: 35%;*/
  height: 100%;
  transform: rotate(60deg);
  left: 1460px;
  /*left: 260px;*/
  border-radius: 30px;
  background: grey;
}

.test:after {
  position: absolute;
  content: '';
  width: 140px;
  /*width: 35%;*/
  height: 100%;
  transform: rotate(-60deg);
  left: 1460px;
  /*left: 260px;*/
  border-radius: 30px;
  background: grey;
}

.text {
  padding-top: 25px;
  padding-left: 50px;
  font-size: xx-large;
  font-family: sans-serif;
  color: Black;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 1;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style1.css">
</head>

<body>


  <div class="contain">
    <div class="hex">
      <div class="innerHexagon" style="z-index:1">

      </div>
    </div>
    <div class="test">
    </div>
    <div class="hex" style="left: 500px">
      <div class="innerHexagon" style="z-index:1">

      </div>
    </div>
    <div class="hex" style="left: 1000px">
      <div class="innerHexagon" style="z-index:1">

      </div>
    </div>

  </div>

</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

屋顶上的小猫咪 2025-02-16 17:29:35

我能够为那些白色条提出这个解决方案。我已经为目的添加了span element .hex div，并在您的原始样式结束时添加了样式。至于响应部分，您需要详细介绍您希望设计在不同屏幕上的表现的详细信息，以便我们能够以这种方式提供帮助。

.contain {
    position: absolute;
    height: 400px;
    width: 700px;
    left: 5%;
  }
  
  .hex {
    position: absolute;
    width: 125px;
    height: 200px;
    border-radius: 25px;
    background: green;
  }
  
  .hex:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 25px;
    transform: rotate(60deg);
    background: green;
  }
  
  .hex:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 25px;
    transform: rotate(-60deg);
    background: green;
  }
  
  .innerHexagon {
    width: 100px;
    height: 152px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: green;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 20px;
  }
  
  .innerHexagon:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(60deg);
    background: green;
    border-radius: 20px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }
  
  .innerHexagon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(-60deg);
    background: green;
    border-radius: 20px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }
  
  .test {
    position: absolute;
    width: 1600px;
    /*width: 400px;*/
    height: 200px;
    z-index: -1;
    border-right: 0px;
    background: grey;
    border-radius: 30px;
  }
  
  .test:before {
    position: absolute;
    content: '';
    width: 140px;
    /*width: 35%;*/
    height: 100%;
    transform: rotate(60deg);
    left: 1460px;
    /*left: 260px;*/
    border-radius: 30px;
    background: grey;
  }
  
  .test:after {
    position: absolute;
    content: '';
    width: 140px;
    /*width: 35%;*/
    height: 100%;
    transform: rotate(-60deg);
    left: 1460px;
    /*left: 260px;*/
    border-radius: 30px;
    background: grey;
  }
  
  .text {
    padding-top: 25px;
    padding-left: 50px;
    font-size: xx-large;
    font-family: sans-serif;
    color: Black;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 1;
  }


  /* new styles added */
.white-strip::after, .white-strip::before {
    content: '';
    height: 115px;
    width: 50px;
    background: transparent;
    position: absolute;
    border-right: 5px solid #ffffff;
    left: -140px;
}

.white-strip::after {
    bottom: 4px;
    transform: rotate(25deg);
    border-top-right-radius: 10px;
}

.white-strip::before  {
    top: 4px;
    transform: rotate(-25deg);
    border-bottom-right-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="contain">
        <div class="test"></div>

        <div class="hex">
          <div class="innerHexagon" style="z-index:1"></div>
        </div>

        <div class="hex" style="left: 500px">
            <span class="white-strip"></span> <!-- added -->
            <div class="innerHexagon" style="z-index:1">   </div>
        </div>

        <div class="hex" style="left: 1000px">
            <span class="white-strip"></span> <!-- added -->
            <div class="innerHexagon" style="z-index:1"></div>
        </div>
    
      </div>

<script type="text/javascript" src="index.js"></script>
    
</body>
</html>

I was able to come up with this solution for those white strips. I have added span element inside .hex div for the purpose and added styles at the end of your original styles. As for the responsive part, you need to elaborate the details on how you want the design to behave on different screens so we may be able to help that way.

.contain {
    position: absolute;
    height: 400px;
    width: 700px;
    left: 5%;
  }
  
  .hex {
    position: absolute;
    width: 125px;
    height: 200px;
    border-radius: 25px;
    background: green;
  }
  
  .hex:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 25px;
    transform: rotate(60deg);
    background: green;
  }
  
  .hex:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 25px;
    transform: rotate(-60deg);
    background: green;
  }
  
  .innerHexagon {
    width: 100px;
    height: 152px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: green;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 20px;
  }
  
  .innerHexagon:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(60deg);
    background: green;
    border-radius: 20px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }
  
  .innerHexagon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    transform: rotate(-60deg);
    background: green;
    border-radius: 20px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }
  
  .test {
    position: absolute;
    width: 1600px;
    /*width: 400px;*/
    height: 200px;
    z-index: -1;
    border-right: 0px;
    background: grey;
    border-radius: 30px;
  }
  
  .test:before {
    position: absolute;
    content: '';
    width: 140px;
    /*width: 35%;*/
    height: 100%;
    transform: rotate(60deg);
    left: 1460px;
    /*left: 260px;*/
    border-radius: 30px;
    background: grey;
  }
  
  .test:after {
    position: absolute;
    content: '';
    width: 140px;
    /*width: 35%;*/
    height: 100%;
    transform: rotate(-60deg);
    left: 1460px;
    /*left: 260px;*/
    border-radius: 30px;
    background: grey;
  }
  
  .text {
    padding-top: 25px;
    padding-left: 50px;
    font-size: xx-large;
    font-family: sans-serif;
    color: Black;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 1;
  }


  /* new styles added */
.white-strip::after, .white-strip::before {
    content: '';
    height: 115px;
    width: 50px;
    background: transparent;
    position: absolute;
    border-right: 5px solid #ffffff;
    left: -140px;
}

.white-strip::after {
    bottom: 4px;
    transform: rotate(25deg);
    border-top-right-radius: 10px;
}

.white-strip::before  {
    top: 4px;
    transform: rotate(-25deg);
    border-bottom-right-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="contain">
        <div class="test"></div>

        <div class="hex">
          <div class="innerHexagon" style="z-index:1"></div>
        </div>

        <div class="hex" style="left: 500px">
            <span class="white-strip"></span> <!-- added -->
            <div class="innerHexagon" style="z-index:1">   </div>
        </div>

        <div class="hex" style="left: 1000px">
            <span class="white-strip"></span> <!-- added -->
            <div class="innerHexagon" style="z-index:1"></div>
        </div>
    
      </div>

<script type="text/javascript" src="index.js"></script>
    
</body>
</html>

回复 原文
~没有更多了~

关于作者

一片旧的回忆

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文