html中怎么写正六边形,用css画正六边形的方法
用css画正六边形的方法
发布时间:2020-09-14 14:56:11
来源:亿速云
阅读:80
作者:小新
小编给大家分享一下用css画正六边形的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3):
方法一:原理把正六边形分成三部分,左中右分别是:before部分,div部分,after部分,如图:
before三角形部分是div的before伪元素,after三角形部分是div的after伪元素。
用css画正六边形
.div {
position: relative;
width: 50px;
height: 86.6px;
margin: 50px auto;
background-color: red;
}
.div:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
right:50px;
border-width: 43.3px 25px;
border-style: solid;
border-color: transparent red transparent transparent;
}
.div:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left:50px;
border-width: 43.3px 25px;
border-style: solid;
border-color: transparent transparent transparent red;
top:0;
}
效果图:
注意div及伪元素的宽高需要根据上面的公式计算。
方法二:也是把正六边形分成三个宽高相同的div,然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形,如图:
用css画正六边形
.one {
width: 50px;
height: 86.6px;
margin: 0 auto;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.two {
position: absolute;
width: 50px;
height: 86.6px;
left: 25px;
top: 0;
transform: translate(-50%,-50%);
transform: rotate(60deg);
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.three {
position: absolute;
width: 50px;
height: 86.6px;
left: 25px;
top: 0;
transform: translate(-50%,-50%);
transform: rotate(300deg);
border-top: 1px solid red;
border-bottom: 1px solid red;
}
效果图:
看完了这篇文章,相信你对用css画正六边形的方法有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
html中怎么写正六边形,用css画正六边形的方法相关推荐
- html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
- html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- css如何设置文本垂直居中显示,css中怎么设置文本居中?css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
- cad绘制正八边形_CAD怎么画正八边形 看完你学会了么
当我们用CAD制图的时候,有时候有些图形需要用到正八边形,此时就需要我们通过CAD软件把正八边形给画出来.具体怎么操作呢?下面就跟大家分享一下CAD画正八边形的操作,希望能帮助到大家. 工具/材料 C ...
- python中的pylab_Python使用pylab库实现画线功能的方法详解
本文实例讲述了Python使用pylab库实现画线功能的方法.分享给大家供大家参考,具体如下: pylab 提供了比较强大的画图功能,但是函数和参数都比较多,很容易搞混.我们平常使用最多的应该是画线了 ...
- 在html中怎么写加起来的,css可以在html里面写吗?
css可以在html里面写吗?答案是可以的.那么如何在HTML中写CSS?下面给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 下面我们来看一下在HTML中写css的方 ...
- html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
- html中如何写新闻题目,DIV CSS布局 短栏目与新闻标题列表布局模块代码
DIV CSS布局 短栏目与新闻标题列表布局模块代码,在线演示与完整源代码下载,常见网页短栏目名称与新闻列表布局模板实例代码,模块CSS代码. css div模块新闻列表布局效果截图 此局部DIV C ...
最新文章
- 2018-2019-1 20165206 《信息安全系统设计基础》第4周学习总结
- Dubbo源码解析 --- DIRECTORY和ROUTER
- python基础教程第二版和第三版哪个好-最好的Python入门教材是哪本?
- php叠加纹理,ps光斑纹理曝光视觉特效叠加合成扩展-ps光斑纹理叠加合成扩展 - 极光下载站...
- wp_terms分类信息表—WordPress数据库研究(2.6.2版本)#8
- DM8168 系统编译、启动、烧写
- 【uniapp】CSS3 的 calc() 函数使用表达式动态计算
- Go非阻塞channel的常见写法
- The slave I/O thread stops(equal MySQL server ids)
- ReactiveCocoa源码拆分解析(四)
- python 无法读取文件 找不到文件
- unique去除重复的向量_R语言向量与因子
- OpenShift 4 - 使用教程和免费试用环境
- java 十亿数据去重_如何在有限的内存限制下实现数十亿级手机号码去重
- ECharts学习总结(一):ECharts的第一个图表
- 七个办法只有一个有效:200 PORT command successful. Consider using PASV.425 Failed to establish connection.
- 关于互相尊重和直言有讳
- 计算机应用基础重难点介绍,计算机基础教学计划范文五篇
- 报错:在实体引用中, 实体名称必须紧跟在 后面。
- 1. 随机事件 样本空间
热门文章
- canvas绘制video
- 卡b卡社区在线下单系统无加密全套源码
- 【金融案例分析01】GME游戏驿站:股票为何暴涨暴跌?是散户大战华尔街大鳄?阴谋论?还是正常市场行为? 一文用金融原理进行趣味解读。
- 关于中国5G的真正实力,终于有人说明白了!
- httpclient设置代理
- 通过“警察局罪犯档案库与通缉犯”来理解GetTOProperty()、SetTOProperty()、GetROProperty()
- python sqlalchemy中文
- Thinkpad 驱动安装-傻瓜安装
- Get netty的魅力 从核心组件到工作原理
- 守护进程(初学者必备)