3地走势图:css画正六边形的两种方法

北京快三走势图 www.mxld9.cn 互联网   发布时间:2018-07-06 16:52:11   作者:佚名   我要评论

本文给大家分享css画正六边形的两种方法,每种方法都不错,需要的朋友跟随脚本之家小编一起看看吧

说下两种css 制作正六边形的方法。

先看一下结果:

在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3):

方法一:原理把正六边形分成三部分,左中右分别是:before部分,div部分,after部分,如图:

before三角形部分是div的before伪元素,after三角形部分是div的after伪元素。

html代码:

<div class='div'></div>

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形成正六边形,如图:

html代码:

<div class='div-2'>
    <div class='one'></div>
    <div class='two'></div>
    <div class='three'></div>
</div>

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画正六边形的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 深入浅析CSS 选择器分组

    这篇文章主要介绍了CSS 选择器分组的相关资料,需要的朋友可以参考下
    2018-07-09
  • css画正六边形的两种方法

    本文给大家分享css画正六边形的两种方法,每种方法都不错,需要的朋友跟随脚本之家小编一起看看吧
    2018-07-06
  • CSS 设置滚动条样式的实例代码

    这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-06
  • 微信小程序 CSS filter(滤镜)的使用示例详解

    filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。接下来通过本文给大家介绍微信小程序 CSS filter(滤镜)的使用示例,感兴趣的朋友一起看看吧
    2018-07-06
  • CSS中有些属性的前面会加上“*”或“_”所代表的意思

    这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
    2018-07-06
  • 浅谈CSS中的尺寸单位

    这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经?;嵊玫絚ss的不同尺寸/长度单位,这里做个整理。感兴趣的小伙
    2018-07-05
  • css实现各种0.5px的线(小结)

    这篇文章主要介绍了css实现各种0.5px的线(小结),主要介绍了0.5px边框、0.5px圆角边框、0.5px左边线、0.5px右边线、0.5px底部线,小编觉得挺不错的,现在分享给大家,也给
    2018-06-28
  • css input[type=file] 样式美化(input上传文件样式 )

    这篇文章主要介绍了css input[type=file] 样式美化(input上传文件样式 )的相关资料,需要的朋友可以参考下
    2018-06-20
  • 移动端使用 rem 单位时 css sprites 定位问题的解决

    现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;这篇文章主要介绍了移动端使用 rem 单位时 css sprites 定位问题的解决,小编觉得挺不错
    2018-06-20
  • css控制元素高度实现自底向上和自顶向下的方法

    这篇文章主要介绍了css控制元素高度实现自底向上和自顶向下的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-20

最新评论

  • 地方领导留言板十周年研讨会暨2016人民网网民留言办理工作会议 2019-02-21
  • 租赁平台上线 租房服务改善 2019-02-20
  • 天津一汽骏派A50正式上市 售价5.59万 2019-02-20
  • 94岁老太病倒 家人拒送医直接换寿衣她活到头了 2019-02-19
  • 紫光阁中共中央国家机关工作委员会 2019-02-18
  • 不是“不尊重公投”,而是不尊重人类社会发展规律就是不尊重人类。 2019-02-18
  • 学习宣传贯彻习近平新时代中国特色社会主义思想系列研讨会第三场研讨会发言摘编 2019-02-17
  • 新能源汽车纳入蚌埠市级政府集中采购目录 2019-02-16
  • 北京:走进高考阅卷现场 2019-02-15
  • 环球 —频道 春城壹网 七彩云南 一网天下 2019-02-15
  • 合肥市庐阳中学启动“教师成长工程” 2019-02-14
  • 美国八旬教授 太原免费教英语 2019-02-14
  • 安徽省投资集团控股有限公司 2019-02-13
  • 新疆维吾尔自治区交通运输厅 2019-02-12
  • 中国对外投资连续7个月增长 “一带一路”相关国家投资成亮点 2019-02-12
  • 945| 548| 318| 672| 664| 950| 525| 913| 875| 413|