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

如何使用CSS创建边框为1px、背景透明的六边形？

DDD

发布： 2024-11-09 18:57:25

原创

452人浏览过

如何使用CSS创建边框为1px、背景透明的六边形？

在css中创建边框为1px、背景透明的六边形

为了实现六边形并使其背景透明，有两种主要方法：使用SVG或CSS：

使用SVG

SVG是一种基于矢量的图像格式。它是一种创建复杂形状的理想选择，包括六边形。下面是一个使用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>

登录后复制

使用CSS

如知AI笔记

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

查看详情

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

CSS的clip-path属性可以用来创建六边形。可以配合background-color和border属性来创建边框为1px、背景透明的六边形。如下代码所示：

<!DOCTYPE html>
<head>
<style>
  .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"></div>

</body>
</html>

登录后复制

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