亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css畫正六邊形

番茄西紅柿 / 3522人閱讀

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

說下兩種css 制作正六邊形的方法。

先看一下結(jié)果：

 

在之前要先了解一下正六邊形內(nèi)角和邊的關(guān)系，正六邊形的每個(gè)內(nèi)角是60deg，如圖（√3其實(shí)是根號(hào)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及偽元素的寬高需要根據(jù)上面的公式計(jì)算。

方法二：也是把正六邊形分成三個(gè)寬高相同的div，然后使用定位以及css3 transform:rotate分別向左右旋轉(zhuǎn)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             }

以上兩種方法，元素的寬高尺寸以及左右位移需要根據(jù)上面的公式計(jì)算不能隨意填寫

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2034.html

相關(guān)文章

  • 手動(dòng)擼個(gè)Android雷達(dá)圖（蜘蛛網(wǎng)圖）RadarView

    摘要：原文鏈接公司產(chǎn)品需要一個(gè)雷達(dá)圖來(lái)展示各維度的比重，網(wǎng)上找了一波，學(xué)到不少，直接自己上手來(lái)擼一記無(wú)圖言虛空簡(jiǎn)單分析一波，確定雷達(dá)圖正幾邊形的正五邊形，分為幾個(gè)層數(shù)層畫邊畫線描繪文字覆蓋區(qū)域主要這幾步，開擼自定義繼承確定需要使用的變量， 原文鏈接 https://mp.weixin.qq.com/s/Ms... 公司產(chǎn)品需要一個(gè)雷達(dá)圖來(lái)展示各維度的比重，網(wǎng)上找了一波，學(xué)到不少，直接自己上...

    forsigner 評(píng)論0 收藏0

  • 玩轉(zhuǎn)CSS 3D -正四面體與正六面體

    摘要：簡(jiǎn)單來(lái)說，就是非常對(duì)稱的立方體，而且每一個(gè)面都是由正多邊形組成，因此在這一篇，將會(huì)畫出正四面體正六面體。完成之后應(yīng)該就會(huì)順利地看到一個(gè)正六面體，這時(shí)候我們可以改變的，可以更加清楚。 我們理解了CSS 3D的個(gè)中原理之后，廢話就不用多說，直接來(lái)畫正多面體吧！只要正多面體可以畫出來(lái)，基本上在CSS 3D的領(lǐng)域里，大概就沒甚么難得倒我們了。 首先看一下百度百科對(duì)于正多面體的介紹：多面體，或稱...

    Kross 評(píng)論0 收藏0

  • 玩轉(zhuǎn)CSS 3D -正四面體與正六面體

    摘要：簡(jiǎn)單來(lái)說，就是非常對(duì)稱的立方體，而且每一個(gè)面都是由正多邊形組成，因此在這一篇，將會(huì)畫出正四面體正六面體。完成之后應(yīng)該就會(huì)順利地看到一個(gè)正六面體，這時(shí)候我們可以改變的，可以更加清楚。 我們理解了CSS 3D的個(gè)中原理之后，廢話就不用多說，直接來(lái)畫正多面體吧！只要正多面體可以畫出來(lái)，基本上在CSS 3D的領(lǐng)域里，大概就沒甚么難得倒我們了。 首先看一下百度百科對(duì)于正多面體的介紹：多面體，或稱...

    doodlewind 評(píng)論0 收藏0

  • [譯][Tkinter 教程08] Canvas 圖形繪制

    摘要：已獲原作者授權(quán)原系列地址簡(jiǎn)介為提供了繪圖功能其提供的圖形組件包括線形圓形圖片甚至其他控件控件為繪制圖形圖表編輯圖形自定義控件提供了可能在第一個(gè)例子里我們將演示如何畫一條直線方法用來(lái)繪制一條直線為以整形表示的四個(gè)坐標(biāo)參數(shù)這表示所要繪制的直線連 已獲原作者授權(quán). 原系列地址: Python Tkinter 簡(jiǎn)介 Canvas 為 Tkinter 提供了繪圖功能. 其提供的圖形組件包括 線...

    ivydom 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<