如何使用CSS创建透明背景的六边形？-html教程-PHP中文网

如何使用CSS创建透明背景的六边形？

碧海醫心

发布： 2024-11-09 15:24:01

原创

606人浏览过

如何使用CSS创建透明背景的六边形？

使用css创建透明背景六边形

为了实现设计图所示的六边形，我们需要使用透明背景和1px边框。以下是两种不同的实现方法：

方法一：SVG

使用SVG（可缩放矢量图形）可以轻松创建六边形。它是一个基于XML的文本格式，可以在Web浏览器中呈现。

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

登录后复制

方法二：CSS

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

立即学习“前端免费学习笔记（深入）”；

也可以使用纯CSS创建六边形。

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

登录后复制

以上就是如何使用CSS创建透明背景的六边形？的详细内容，更多请关注php中文网其它相关文章！