css实现正六边形嵌套圆心

要实现一个正六边形嵌套圆心,可以使用CSS的::before::after伪元素以及border-radius属性。以下是具体的解析和代码:

  1. 使用::before::after伪元素创建正六边形。
  2. 设置正六边形的背景色。
  3. 使用border-radius属性使正六边形的内角为60度。
  4. 在正六边形内部创建圆形,并设置其位置、大小和背景色。
  5. 使用border-radius属性使圆形的内角为50%,使其呈现圆形效果。

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>正六边形中间圆形</title><style>.hexagon {position: relative;width: 200px;height: 100px;background-color: #F99B68;margin: 50px auto;}.hexagon::before,.hexagon::after {content: "";position: absolute;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;}.hexagon::before {bottom: 100%;border-bottom: 50px solid #F99B68;border-top: 50px solid #F99B68;}.hexagon::after {top: 100%;border-top: 50px solid #F99B68;border-bottom: 50px solid white;}.circle {position: absolute;top: 0px;left: 26%;width: 100px;height: 100px;background-color: white;border-radius: 50%;}.point {position: absolute;top: 25px;left: 25%;width: 50px;height: 50px;background-color: #F99B68;border-radius: 50%;}</style>
</head>
<body><div class="hexagon"><div class="circle"><div class="point"></div></div></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198093.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【matlab程序】matlab画子图的多种样式

【matlab程序】matlab画子图的多种样式

【漏洞复现】速达软件存在任意文件上传

漏洞描述 速达软件全系产品存在任意文件上传漏洞,未经身份认证的攻击者可以通过此漏洞上传恶意后门文件,执行任意指令,造成服务器失陷 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、…

fastadmin列表头部按钮批量上传视频

上传界面通过layui生成 index.html <a href="{:url(video/piliangadd)}" class="btn btn-success btn-piliangadd btn-dialog {:$auth->check(video/piliangadd)?:hide}" title="批量上传" ><i class="fa fa-plus">…

flask之邮件发送

一、安装Flask-Mail扩展 pip install Flask-Mail二、配置Flask-Mail 格式&#xff1a;app.config[参数]值 三、实现方法 3.1、Mail类 常用类方法 3.2、Message类&#xff0c;它封装了一封电子邮件。构造函数参数如下&#xff1a; flask-mail.Message(subject, recipient…

【产品经理】业务问题的诊断:由简入繁,渐进成长

产品的价值在于解决了用户的问题。业务问题的诊断&#xff0c;发现用户的真实问题&#xff0c;拨云见日。 产品的价值在于解决了一定范围的问题&#xff0c;让整体的业务运转、参与角色都能收到因为产品的贡献而产生的价值或便利。微信解决了熟人之间的沟通问题&#xff0c;支付…

【React + Typescript】使用WebPack包管理、各种扩展插件组成的初始模板,开源协议:CC-BY-4.0

React Typescript Webpack 模板 模板展示项目结构使用的部分扩展包页面配置代码Layout 公共容器组件路由Jspackage.json 开源模板下载TIP 模板展示 项目结构 使用的部分扩展包 &#x1f4c2; System ├── &#x1f4c2; Plugin │ ├── &#x1f4c4; file-loader | 在处…

idea连接mysql详细讲解

IDEA连接mysql又报错&#xff01;Server returns invalid timezone. Go to Advanced tab and set serverTimezone prope 前进的道路充满荆棘。 错误界面 IDEA连接mysql&#xff0c;地址&#xff0c;用户名&#xff0c;密码&#xff0c;数据库名&#xff0c;全都配置好了&…

Mybatis异常org.apache.ibatis.binding.BindingException: Parameter “xxx“ not found

问题1: 可能是 mybatis 的xml&#xff0c;对应的mapper接口缺少Param注解&#xff0c;或者Param注解的value与xml的不一致 切记只要参数不是一个集合类型向下图或者多个参数值就要加Param注解 问题2: mybatis的xml&#xff0c;存在多余的注释。注释中包含#{}、${}。注释掉的代…

行云海CMS SQL注入漏洞复现

0x01 产品简介 行云海cms是完全开源的一套CMS内容管理系统,简洁,易用,安全,稳定,免费。 0x02 漏洞概述 行云海cms中ThinkPHP在处理order by排序时可利用key构造SQL语句进行注入,LtController.class.php中发现传入了orderby未进行过滤导致sql注入。攻击者除了可以利用 SQL 注入…

数字艺术语言processing初步

文章目录 示例程序刷新逻辑二维对象 Processing是专门用于艺术设计的编程语言&#xff0c;可以实现非常炫酷的图形和功能&#xff0c;比如下面这张联合国用的图就是用Processing编写的&#xff0c;本文简要介绍以下Processing&#xff0c;并列出其二维对象。 示例程序 第一步&…

删除PPT文件的备注内容

解决方案的工作经常汇报以及经常做ppt的回报工作&#xff0c;但是删除备注很痛苦。 在网上或者拿历史的ppt文件修改后&#xff0c;需要删除ppt备注内容以及删除ppt个人文件信息的办法&#xff1a; 现象&#xff1a;很多备注信息&#xff0c;需要删除 解决办法一、 文件--信息-…

Linux Docker 图形化工具 Portainer远程访问

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 结束语 前言 Portainer是一个轻量级的容器管理工具&#xff0c;可以通过Web界面对Docker容器进行管理和监控。它提供了…

nodejs微信小程序+python+PHP就业求职招聘信息平台的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

ffmpeg编译支持AVS3编解码

libuavs3d ffmpeg的官方源码中已经支持了libuavs3d解码器的接口&#xff08;libavcodec/libuavs3d.c中定义&#xff09;&#xff0c;因此如果需要编译ffmpeg支持libuavs3d解码器&#xff0c;只需要安装libuavs3d.so以及开启ffmpeg的编译选项即可。 安装libuavs3d解码器 #代码仓…

小程序开发

1.准备工作 1.注册公众平台账号&#xff08;免费&#xff09;2.下载小程序开发工具&#xff08;免费&#xff09; 2.开发步骤 1.第一个小程序 1.小程序的AppID相当于小程序平台的一个身份证&#xff0c;这里使用的是测试号&#xff08;注意区别于服务号或订阅号的AppID&#xf…

学习前端都需要学什么?

前端开发是一门需要掌握多种技术和工具的综合性学科。作为一名合格的前端开发者&#xff0c;需要具备以下几方面的知识和技能&#xff1a; HTML&#xff1a;HTML 是构建网页的基础&#xff0c;是前端开发的第一步。需要掌握各种 HTML 标签的使用和语义化的编写方式&#xff0c…

本地快速部署Apache服务器并使用内网穿透实现远程访问

Apache服务安装配置与结合内网穿透实现公网访问 文章目录 Apache服务安装配置与结合内网穿透实现公网访问前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpo…

【自习室预约系统源码】基于springboot框架的自习室管理和预约系统设计

&#x1f345; 简介&#xff1a;500精品计算机源码学习 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 文末获取源码 目录 一、以下学习内容欢迎领取&#xff1a; 二、文档资料截图&#xff1a; 三想了解更多&#xff0c;请收藏、评论、留言&#xff1a;…

GPTs每日推荐--生化危机【典藏版】

今天给大家推荐一个游戏性质的GPTs&#xff0c;叫做生化危机典藏版&#xff0c;国内点击可玩。 开篇&#xff1a;玩家从末日中醒来。 选择&#xff1a;玩家会遇到各种资源、任务、剧情&#xff0c;需要自行选择相关的分支剧情&#xff0c;一旦选错&#xff0c;无法重选。 结局…

openGauss学习笔记-142 openGauss 数据库运维-例行维护-导出并查看wdr诊断报告

文章目录 openGauss学习笔记-142 openGauss 数据库运维-例行维护-导出并查看wdr诊断报告 openGauss学习笔记-142 openGauss 数据库运维-例行维护-导出并查看wdr诊断报告 生成快照数据需参数enable_wdr_snapshoton&#xff0c;访问WDR快照数据需要sysadmin或monadmin权限&#…