讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

如何使用 CSS 实现透明背景且边框为 1px 的六边形？

聖光之護
发布： 2024-11-09 19:40:32
原创
1241人浏览过

如何使用 CSS 实现透明背景且边框为 1px 的六边形？

透明背景的六边形 css 实现

在设计图中，我们需要一个透明背景且边框为 1px 的六边形。如何使用 CSS 实现呢？

SVG 方法

SVG（可缩放矢量图形）可以轻松创建六边形。以下代码实现了透明背景、1px 边框的六边形：

度加剪辑
度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

度加剪辑 380
查看详情 度加剪辑 
<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>
登录后复制

纯 CSS 方法

另一种方法是使用纯 CSS。通过创建以下 HTML 和 CSS 代码，可以实现具有透明背景、1px 边框的六边形：

<div class="hexagon-container">
  <div class="hexagon"></div>
</div>
登录后复制
.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%);
}
登录后复制

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

相关标签：
css ai css html

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Vue.js 中 Dialog 组件的 visible 属性无法触发监听，如何通过修改组件代码解决？ 下一篇：面试中，个人项目如何才能真正加分？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
自己编写的html程序怎么运行_运行自编html程序步骤【教程】 首先使用浏览器直接打开HTML文件，双击或通过菜单“打开文件”加载；若需运行高级功能，则安装Node.js并使用http-server启动本地服务，或在代码编辑器中利用LiveServer等插件实现实时预览与自动刷新。
2025-12-20 08:02:03
448
vs.net怎么运行html_vs.net运行html步骤【指南】 首先创建Web项目或配置外部浏览器预览HTML文件。通过新建ASP.NET项目并添加HTML页面后按Ctrl+F5运行，或安装LiveServer等插件实现静态文件实时预览，也可在选项中设置Chrome等外部浏览器直接打开HTML文件以查看效果。
2025-12-20 06:43:23
876
dwcc2019怎么运行html_dwcc2019运行html步骤【指南】 首先确认HTML文件正确保存在DWCC2019项目根目录并显示于文件面板，确保扩展名为.html或.htm；接着在软件中双击打开文件，点击“实时预览”按钮选择浏览器查看页面效果，若无响应需检查浏览器关联或重启软件；同时在代码视图中检查DOCTYPE声明、标签闭合情况，并使用“代码验证”工具检测错误，修正后重新保存；若涉及AJAX等需HTTP服务的功能，则进入“站点”菜单配置本地测试服务器，设置服务器类型、模型及WebURL前缀，将文件置于服务器根目录并通过服务器地址访问；当上述方法无效时，可直接
2025-12-20 05:43:15
340
如何在电脑显示html_在电脑上正确显示HTML文件内容【正确】 应使用浏览器打开HTML文件并检查扩展名和编码：一、右键选择浏览器打开；二、在浏览器地址栏输入file:///路径访问；三、显示并确认扩展名为.html；四、确保文件含且保存为UTF-8无BOM；五、在系统默认应用中将.html关联至浏览器。
2025-12-20 05:13:34
571
html如何缩小_缩小HTML页面或元素尺寸【尺寸】 可通过CSStransform缩放、调整宽高、viewport元标签、rem单位动态缩放、容器查询五种方法实现HTML元素或页面视觉缩小，各法适用场景不同且互不依赖。
2025-12-20 04:43:18
241
如何制作 html_制作基础HTML页面的完整过程【完整】 基础HTML页面制作需五步：一、用纯文本编辑器新建文件并命名为index.html；二、输入HTML5标准结构，含DOCTYPE、html、head（含meta和title）、body；三、在body中添加h1、p、ul等语义化内容；四、以UTF-8编码和“所有文件”类型保存；五、浏览器打开验证渲染与源码。
2025-12-20 02:17:23
583
如何启用html5模式_浏览器启用HTML5渲染模式【启用】 应确保DOCTYPE为、禁用IE兼容性视图、检查并修改X-UA-Compatible响应头、添加meta标签强制标准模式，并验证浏览器是否原生支持HTML5特性。
2025-12-20 01:11:17
648
如何教授HTML入门知识_新手教学方案设计【技巧】 HTML教学需从直观认知入手：先解构真实网页源码，明确html、head、body结构；再动手编写首个HTML文件并运行；接着按语义分三类讲解标签；随后纠偏嵌套与闭合错误；最后通过交互式修改巩固知识。
2025-12-20 00:45:34
774
py怎么运行html文件_python运行html文件方法【教程】 使用Python运行HTML文件的方法有三种：一是通过内置http.server模块启动本地服务器，命令为python-mhttp.server8000；二是编写Python脚本自动化启动服务器，便于重复使用；三是利用webbrowser模块直接在默认浏览器中打开HTML文件，无需启动服务器。
2025-12-19 23:05:02
587
html5如何制作表_HTML5制作数据表格教程【表格】 HTML5表格通过语义化结构（table/thead/tbody/tfoot）、合并单元格（rowspan/colspan）、标题（caption）、表头关联（scope/id/headers）及响应式优化实现结构化数据展示。
2025-12-19 23:03:07
763
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部