首頁 web前端 html教學 CSS3-六边形_html/css_WEB-ITnose

CSS3-六边形_html/css_WEB-ITnose

Jun 24, 2016 am 11:28 AM

整理了2种方法,看完肯定觉得超简单~

一、旋转型

话不多说先看下需要的样式:

1.transform:rotate(angle)

2.overflow

3.visibility

效果:演示效果,runjs

html结构:

1

<body>    <div class="box1">        <div class="box2">            <div class="box3">                <p>为所欲为为所欲为</p>            </div>        </div>    </div></body>

登入後複製

3层div,结构是不是很简单~接下来要怎么旋转呢?

为了方便理解加了背景

box1:红色

box2:黑色

box3:粉色

1.box1旋转120°,box2旋转-60°,box3再旋转-60°,我们的内容放在box3中。

2.经过旋转肯定有超出的部分,对3个div都设置overflow:hidden。

3.box1,box2是用来旋转得到6边形的,所以对他们设置visibility: hidden,box3放内容,需显示,因此设置visibility: visible。

(如果不对box3设置visibility: visible;它会继承box2的visibility: hidden; )

注意div的宽高不要相等,不然得到的就不是6边形咯。

经过旋转和对超出部分的隐藏就得到我们想要的6边形了,所有代码如下:

1

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>CSS3—六边形</title>    <style type="text/css">             .box1, .box2, .box3        {            width: 200px;            height: 250px;            overflow: hidden;        }        .box1, .box2        {            visibility: hidden;        }        .box1        {            transform: rotate(120deg);            -ms-transform: rotate(120deg);            -moz-transform: rotate(120deg);            -webkit-transform: rotate(120deg);        }        .box2        {            transform: rotate(-60deg);            -ms-transform: rotate(-60deg);            -moz-transform: rotate(-60deg);            -webkit-transform: rotate(-60deg);        }        .box3        {            transform: rotate(-60deg);            -ms-transform: rotate(-60deg);            -moz-transform: rotate(-60deg);            -webkit-transform: rotate(-60deg);            background-color:pink;            visibility: visible;        }        .box3 p{            color: yellow;            font-size: 22px;            line-height: 200px;            text-align: center;        }    </style><body>    <div class="box1">        <div class="box2">            <div class="box3">                <p>为所欲为为所欲为</p>            </div>        </div>    </div></body>

登入後複製

二、拼接型

看效果:演示效果,runjs

很明显2个三角形加1个矩形,是不是很简单~

三角形请看上一篇:CSS3—三角形

代码如下:

1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css—六边形2</title>    <style>    .triangleb{        width:0;        height:0;        border-top:0px solid transparent;        border-right:60px solid transparent;        border-bottom:40px solid pink;        border-left:60px solid transparent;    }    .trianglet{        width:0;        height:0;        border-top:40px solid pink;        border-right:60px solid transparent;        border-bottom:0px solid transparent;        border-left:60px solid transparent;    }    .box{        width: 120px;        height: 65px;        background-color: pink;    }</style></head><body>    <div class="triangleb"></div>    <div class="box"></div>    <div class="trianglet"></div></body></html>

登入後複製

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

&lt; meter&gt;的目的是什麼。 元素? &lt; meter&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什麼。 元素?

&lt; datalist&gt;的目的是什麼。 元素? &lt; datalist&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什麼。 元素?

&gt; gt;的目的是什麼 元素? &gt; gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什麼 元素?

視口元標籤是什麼?為什麼對響應式設計很重要? 視口元標籤是什麼?為什麼對響應式設計很重要? Mar 20, 2025 pm 05:56 PM

視口元標籤是什麼?為什麼對響應式設計很重要?

See all articles