怎么使用css实现一个六边形，背景色为透明色，border为1px实现，设计图如下？

作者站长头像
站长
· 阅读数 5

怎么使用css实现一个六边形，背景色为透明色，border为1px实现，设计图如下？补充内容：背景色需要透明的怎么使用css实现一个六边形，背景色为透明色，border为1px实现，设计图如下？

回复
1个回答
avatar
test
2024-06-28

SVG:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500" height="500">
            <polygon points="100,30 140,50 140,90 100,110 60,90 60,50" style="fill: transparent;stroke: #e07cc2; stroke-width:3px;"></polygon>
        </svg>
    </body>
</html>

answer image

<!DOCTYPE html>
<html>
<head>
<style>
  .hexagon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* 调整容器高度以适应你的需要 */
  }

  .hexagon {
    position: relative;
    width: 100px; /* 调整六边形大小 */
    height: 100px; /* 计算六边形高度，可以根据需要进行调整 */
    background-color: pink;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  .hexagon:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 96px;
    height: 96px;
    background-color: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
</style>
</head>
<body>

<div class="hexagon-container">
  <div class="hexagon"></div>
</div>

</body>
</html>

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容