資訊專欄INFORMATION COLUMN
摘要：使用之前，都是利用圖片作為背景來實(shí)現(xiàn)的，現(xiàn)在有這把利器，順利完美的繪制六邊形。繪制六邊形代碼可見代碼非常簡單，這里要運(yùn)用偽元素來實(shí)現(xiàn)代碼看完這個(gè)案例，對(duì)于繪制三角形就簡單了，嘗試自己繪制一下吧。
使用h5之前，都是利用圖片作為背景來實(shí)現(xiàn)的，現(xiàn)在有h5+css3這把利器，順利完美的繪制六邊形。
繪制六邊形
html代碼：
可見html代碼非常簡單，這里要運(yùn)用偽元素來實(shí)現(xiàn)
css代碼：
.shape-layer {
position:relative;
width:336px;
height:196px;
background-color:#0174db;
}
.shape-layer::before {
content:"";
position:absolute;
left:0;
top:-96px;
width:0;
height:0;
border-left:transparent solid 168px;
border-bottom:#0174db solid 96px;
border-right:transparent solid 168px;
}
.shape-layer::after {
content:"";
position:absolute;
left:0;
bottom:-96px;
width:0;
height:0;
border-left:transparent solid 168px;
border-top:#0174db solid 96px;
border-right:transparent solid 168px;
}
看完這個(gè)案例，對(duì)于繪制三角形就簡單了，嘗試自己繪制一下吧。
本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處，多謝您的支持。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112126.html
摘要：中需要用到的數(shù)學(xué)公式很多網(wǎng)上都有，不需要自己手寫，只要增加點(diǎn)印象，一個(gè)復(fù)制就可以拉過來用了，啦啦啦，小君也很會(huì)偷懶的，哈哈哈繪制直線同理，定義一個(gè)名為的函數(shù)來實(shí)現(xiàn)這部分功能。 前言 身為一個(gè)程序員竟然沉迷游戲，wtf？？？ 都怪騰訊前幾天出了一款叫做尋仙的手游，作為曾經(jīng)的資深玩家，小V君猶豫再三還是忍不住入坑了。入坑了怎么不去打游戲，還在這里發(fā)文章？ 不不不，小V君今天在這里可不是要跟...
摘要：在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一做更多形狀的變換，這種方法就是的，這個(gè)看起來有點(diǎn)眼熟，因?yàn)樗揪痛嬖谟诶镱^，利用掩碼剪裁的方法，連接坐標(biāo)繪制掩碼區(qū)域，就可以做出許多不同的 在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一div做更多形狀的變換，這種方法就是CSS3的clip...
閱讀 645·2021-09-22 10:02
閱讀 6400·2021-09-03 10:49
閱讀 571·2021-09-02 09:47
閱讀 2156·2019-08-30 15:53
閱讀 2934·2019-08-30 15:44
閱讀 907·2019-08-30 13:20
閱讀 1821·2019-08-29 16:32
閱讀 895·2019-08-29 12:46
