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

最新评论

  • 世界杯还可以这样看 日媒:中国AI产品抢眼亚洲电子展} 2018-12-19
  • 广东万金油轰19+11展全能身手 连续两场得分王无愧核心 2018-12-19
  • 把市场经济说成计划经济是不是痴呆病? 2018-12-18
  • 山西省重要党务政务信息新闻发布会——黄河新闻网 2018-12-17
  • 黄坤明会见澳门新闻界高层访京团 2018-12-16
  • 你把我抱紧 我帮你扶伞 2018-12-16
  • 最高人民法院首次发布禁毒工作白皮书 2018-12-15
  • 高考背后,他们默默付出(组图)【3】 2018-12-15
  • 一家人写14万字介绍白云山花草 2018-12-14
  • 正定--河北频道--人民网 2018-12-14
  • 北京工业大学:突出‘京味’、体现‘京韵’,加快世界一流大学和一流学科建设 2018-12-13
  • 把握和传承好“变则通”思想(大家手笔) 2018-12-12
  • 英国歌手世界杯开幕比不雅手势 恐遭逮捕并罚款5万 2018-12-11
  • 一图到底3分钟读懂上合峰会医疗保障,为何青睐这里 2018-12-11
  • 白岩松康辉撒贝宁欧阳夏丹 揭秘央视主播成功秘诀 2018-12-10
  • 620| 587| 549| 23| 159| 319| 331| 190| 744| 413|