css画正六边形

番茄西红柿发布于2019-04-23 13:33 / 3469人阅读

摘要：方法二也是把正六边形分成三个宽高相同的，然后使用定位以及分别向左右旋转形成正六边形，如图代码代码以上两种方法，元素的宽高尺寸以及左右位移需要根据上面的公式计算不能随意填写

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

先看一下结果：

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

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

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

html代码：

</>复制代码 
class=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 style=position:relative;width:100px;margin:0 auto;>
    <div class=one>div>
    <div class=two>div>
    <div class=three>div>
div>

css代码:

</>复制代码 
 1 .one {
 2                 width: 50px;
 3                 height: 86.6px;
 4                 margin: 0 auto;
 5                 border-top: 1px solid red;
 6                 border-bottom: 1px solid red;
 7             }
 8             .two {
 9                 position: absolute;
10                 width: 50px;
11                 height: 86.6px;
12                 left: 25px;
13                 top: 0;
14                 transform: translate(-50%,-50%);
15                 transform: rotate(60deg);
16                 border-top: 1px solid red;
17                 border-bottom: 1px solid red;
18             }
19             .three {
20                 position: absolute;
21                 width: 50px;
22                 height: 86.6px;
23                 left: 25px;
24                 top: 0;
25                 transform: translate(-50%,-50%);
26                 transform: rotate(300deg);
27                 border-top: 1px solid red;
28                 border-bottom: 1px solid red;
29             }

以上两种方法，元素的宽高尺寸以及左右位移需要根据上面的公式计算不能随意填写

GPU云服务器云服务器六边形蜂巢六边形绘制六边形图片六边形块级

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2034.html

手动撸个Android雷达图（蜘蛛网图）RadarView

摘要：原文链接公司产品需要一个雷达图来展示各维度的比重，网上找了一波，学到不少，直接自己上手来撸一记无图言虚空简单分析一波，确定雷达图正几边形的正五边形，分为几个层数层画边画线描绘文字覆盖区域主要这几步，开撸自定义继承确定需要使用的变量，原文链接 https://mp.weixin.qq.com/s/Ms... 公司产品需要一个雷达图来展示各维度的比重，网上找了一波，学到不少，直接自己上...

forsigner 2019-08-15 17:58 评论0 收藏0
玩转CSS 3D -正四面体与正六面体

摘要：简单来说，就是非常对称的立方体，而且每一个面都是由正多边形组成，因此在这一篇，将会画出正四面体正六面体。完成之后应该就会顺利地看到一个正六面体，这时候我们可以改变的，可以更加清楚。我们理解了CSS 3D的个中原理之后，废话就不用多说，直接来画正多面体吧！只要正多面体可以画出来，基本上在CSS 3D的领域里，大概就没甚么难得倒我们了。首先看一下百度百科对于正多面体的介绍：多面体，或称...

Kross 2019-08-02 16:14 评论0 收藏0
玩转CSS 3D -正四面体与正六面体

摘要：简单来说，就是非常对称的立方体，而且每一个面都是由正多边形组成，因此在这一篇，将会画出正四面体正六面体。完成之后应该就会顺利地看到一个正六面体，这时候我们可以改变的，可以更加清楚。我们理解了CSS 3D的个中原理之后，废话就不用多说，直接来画正多面体吧！只要正多面体可以画出来，基本上在CSS 3D的领域里，大概就没甚么难得倒我们了。首先看一下百度百科对于正多面体的介绍：多面体，或称...

doodlewind 2019-08-29 18:39 评论0 收藏0
[译][Tkinter 教程08] Canvas 图形绘制

摘要：已获原作者授权原系列地址简介为提供了绘图功能其提供的图形组件包括线形圆形图片甚至其他控件控件为绘制图形图表编辑图形自定义控件提供了可能在第一个例子里我们将演示如何画一条直线方法用来绘制一条直线为以整形表示的四个坐标参数这表示所要绘制的直线连已获原作者授权. 原系列地址: Python Tkinter 简介 Canvas 为 Tkinter 提供了绘图功能. 其提供的图形组件包括线...

ivydom 2019-07-30 16:08 评论0 收藏0