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.rhkb.cn/news/210194.html

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

相关文章

Qt 软件调试——windbg初篇(一)

在上一篇《Qt 软件调试&#xff08;二&#xff09;使用dump捕获崩溃信息》中我们结尾处提示大家先准备好windbg&#xff0c;windbg是非常强大的调试工具&#xff0c;对于我们进行代码调试和分析异常有着非常重要的意义。 在Qt软件调试这个系列的首篇&#xff0c;我们介绍了《Qt…

前端传参中带有特殊符号导致后端接收时乱码或转码失败的解决方案

文章目录 bug背景解决思路1&#xff1a;解决思路2解决思路3&#xff08;最终解决方案&#xff09;后记 bug背景 项目中采用富文本编辑器后传参引起的bug&#xff0c;起因如下&#xff1a; 数据库中存入的数据会变成这种未经转码的URL编码 解决思路1&#xff1a; 使用JSON方…

7nm项目之顶层规划——01数据导入

1.创建workspace 创建workspace后&#xff0c;在其目录下产生。 CORTEXA53.json文件是将有默认配置的文件master.json、有library的.config.json文件、tunes下CORTEXA53.tunes.json文件合并 注&#xff1a;tunes下的CORTEXA53.tunes.json文件可以覆盖一些master.json的设置…

深入微服务架构 | 微服务与k8s架构解读

微服务项目架构解读 ① 什么是微服务&#xff1f; 微服务是指开发一个单个小型的但有业务功能的服务&#xff0c;每个服务都有自己的处理和轻量通讯机制&#xff0c;可以部署在单个或多个服务器上。 微服务也指一种种松耦合的、有一定的有界上下文的面向服务架构。也就是说&…

华为手环关闭智能适时测量

问题 使用华为手环并使用华为创新研究APP后&#xff0c;会自动打开智能适时测量开关&#xff0c;此开关开启后&#xff0c;手环会在睡眠时间自动测量血氧&#xff0c;增加手环功耗从而影响续航&#xff0c;用户可根据自身需求决定是否开启&#xff0c;下文介绍如何找到此开关。…

PyQt6 QListWidget列表控件

​锋哥原创的PyQt6视频教程&#xff1a; 2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 PyQt6 Python桌面开发 视频教程(无废话版) 玩命更新中~共计35条视频&#xff0c;包括&#xff1a;2024版 PyQt6 Python桌面开发 视频教程(无废话…

Failed to resolve org.junit.platform:junit-platform-launcher:1.9.3

springboot 跑 unit test 的时候&#xff0c;如果报错如题的话&#xff0c;可以更改idea 里的 Settings ——> HTTP Proxy 配置为&#xff1a;Auto-detect proxy settings

STM32单片机项目实例:基于TouchGFX的智能手表设计(1)项目介绍及GUI界面基础

STM32单片机项目实例&#xff1a;基于TouchGFX的智能手表设计&#xff08;1&#xff09;项目介绍及GUI界面基础 一、项目介绍 1.1方案提供 1.2主控选择 1.3硬件平台 1.4 开发环境 1.5 关于华清 二、GUI界面基础 2.1.1 嵌入式绘图系统 2.1.1 色彩格式 2.1.1帧缓冲区 …

某60区块链安全之JOP实战一学习记录

区块链安全 文章目录 区块链安全Jump Oriented Programming实战一实验目的实验环境实验工具实验原理实验内容Jump Oriented Programming实战一 实验步骤分析合约源代码漏洞Jump Oriented Programming实战一 实验目的 学会使用python3的web3模块 学会分析以太坊智能合约中中Ju…

5. Jetson Orin Nano CUDA 配置

5. Jetson Orin Nano CUDA 配置 1&#xff1a;安装Jtop jtop安装主要有以下三个步骤&#xff1a; 安装pip3 我们需要使用pip3来安装jtop&#xff0c;所以先安装pip3 sudo apt install python3-pip安装jtop sudo -H pip3 install -U jetson-stats运行jtop服务 sudo -H pip3 in…

Qt 天气预报项目

参考引用 QT开发专题-天气预报 1. JSON 数据格式 1.1 什么是 JSON JSON (JavaScript Object Notation)&#xff0c;中文名 JS 对象表示法&#xff0c;因为它和 JS 中对象的写法很类似 通常说的 JSON&#xff0c;其实就是 JSON 字符串&#xff0c;本质上是一种特殊格式的字符串…

前端面试高频考点—TCP vs UDP

目录 简介&#xff1a; 区别&#xff1a; 应用选择&#xff1a; tcp为什么需要三次握手&#xff1f; 简介&#xff1a; TCP(传输控制协议)和UDP&#xff08;用户数据报协议&#xff09; TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议&#xff0c;是专门为了在不…

关于如何解决问题?代码习惯。

警钟长鸣 从师哥身上学到的东西&#xff1a; 关于如何解决问题&#xff1f; 1、沟通&#xff1a;有效的沟通&#xff0c;将问题描述清楚&#xff0c;让老师和师哥明白你出了什么问题&#xff0c;给出建议&#xff0c;很多时候一句良言胜过自己摸索很久 2、出现问题由浅入深地…

基于AT89C51单片机的秒表设计

1&#xff0e;设计任务 利用单片机AT89C51设计秒表&#xff0c;设计计时长度为9:59:59&#xff0c;超过该长度&#xff0c;报警。创新&#xff1a;设置重启&#xff1b;暂停&#xff1b;清零等按钮。最后10s时播放音乐提示。 本设计是采用AT89C51单片机为中心&#xff0c;利用其…

如何使用Cloudreve搭建本地云盘系统并实现随时远程访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

20:kotlin 类和对象 --泛型(Generics)

类可以有类型参数 class Box<T>(t: T) {var value t }要创建类实例&#xff0c;需提供类型参数 val box: Box<Int> Box<Int>(1)如果类型可以被推断出来&#xff0c;可以省略 val box Box(1)通配符 在JAVA泛型中有通配符?、? extends E、? super E&…

eNSP实验

前言 本文记录了使用eNSP进行组网&#xff0c;学习、巩固一些之前学的网络基础知识和协议。实验中用到的eNSP工程源文件在下方仓库中。 门牙会稍息 / eNSP GitCode 一&#xff1a;同网段、网关互通 网络拓扑如下&#xff1a; AR1的配置&#xff1a; interface G0/0/0 ip a…

C# | 使用AutoResetEvent和ManualResetEvent进行线程同步和通信

使用AutoResetEvent和ManualResetEvent进行线程同步和通信 文章目录 使用AutoResetEvent和ManualResetEvent进行线程同步和通信介绍AutoResetEventManualResetEvent 异同点使用场景和代码示例AutoResetEvent 使用示例ManualResetEvent 使用示例阻塞多个线程并同时激活 介绍 在…

dockerfile文件:copy和add 异同

相同点&#xff1a; 复制文件或目录&#xff1a; 无论是 COPY 还是 ADD 都可以将文件或目录从构建上下文复制到容器中。支持源路径和目标路径&#xff1a; 两者都需要指定源路径和目标路径&#xff0c;用于指定要复制的文件或目录在主机上的位置以及在容器中的目标路径。 不同…

基于javaweb的宠物服务商城系统设计与开发

摘 要 最近几年以来&#xff0c;宠物在人们的日常生活中所占的地位越来越重要了&#xff0c;它们不仅仅是我们的朋友&#xff0c;也成为了我们家庭中的一份子。21世纪&#xff0c;信息技术飞速发展&#xff0c;计算机行业日新月异&#xff0c;极大地带动了信息的流动&#xff…