css畫正六邊形

番茄西紅柿發布于2019-04-23 13:33 / 3428人閱讀

摘要：方法二也是把正六邊形分成三個寬高相同的，然后使用定位以及分別向左右旋轉形成正六邊形，如圖代碼代碼以上兩種方法，元素的寬高尺寸以及左右位移需要根據上面的公式計算不能隨意填寫

說下兩種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云服務器六邊形蜂巢六邊形繪制六邊形圖片六邊形塊級

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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