1076788 C S S C O D E

ลำดับตอนที่ #7 : img | ทำรูปเป็นหกเหลี่ยม -แนว

SHOWAHEXAGON
from. csstrick (click) | theme. supercell (click)
comment & vote
- please do not give away  -

 

ขอพูดอะไรถึงโค้ดนี้นิดนึงนะคะ
โค้ดตัวนี้ค่อนข้างจะแต่งยาก เรื่องมาก พังง่ายมากๆ เลย
ถ้าอยากจะลองแต่งเองก็สามารถทำได้ค่ะ :)
โดยส่วนตัวคิดว่าเหมาะสำหรับโชว์รูปเวลาทำธีมแจก
อะไรแนวนี้ ไม่เหมาะกับจะทำกล่องแปะข้อความค่ะ เพราะมันโดนบัง
ถ้าอยากจะย่อขนาดจริงๆ ส่ง secret msg. มาให้ทำให้ได้ค่ะ 
<div class="space"> <div class="hexagon"></div> </div> <style type="text/css"> .space:hover { -webkit-transform:rotate(องศาที่เม้าส์วางแล้วเอียงdeg); -moz-transform:rotate(องศาที่เม้าส์วางแล้วเอียงdeg);width: 110px; height: 110px; -o-transform: rotate(องศาที่เม้าส์วางแล้วเอียงdeg); -webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;} .space { -webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s; width: 110px; height: 110px;} .hexagon { width: 300px; height: 165px; } .hexagon, .hexagon:before, .hexagon:after { background: url(รูปภาพที่จะโชว์) ตำแหน่งภาพ เช่น center หรือ top หรือ left หรือ right หรือ bottom ; } .hexagon:before, .hexagon:after { content: ""; position: absolute; left: 64px; width: 172px; height: 172px; -moz-transform: rotate(145deg) skew(22.5deg); -webkit-transform: rotate(145deg) skew(22.5deg); transform: rotate(145deg) skew(22.5deg); } .hexagon:before { top: -86px; } .hexagon:after { top: 79px; } .hexagon span { position: absolute; top: 0; left: 0; width: 300px; height: 165px; background: deepskyblue; z-index: 1; }</style>


❀ Supercell