六angular形响应网格

我从互联网上在我的网站上加载了多个图像。 是否有可能在一个响应式网格中给所有这些图像一个六angular形的形状 ？

<div> <img src="link" class="Image"> </div> <div> <img src="link" class="Image"> </div> ... 

我find了多种方法来做到这一点，但你需要在CSS代码中填写图像src 。 这对我来说是不可能的，导致从jQuery互联网随机图像的网站加载，所以我不能使用背景图像。

我试过这个： http : //jsfiddle.net/8f5m5wv0/

Answer 1

这里是演示和响应网格六边形的储存。 这里的代码不被维护 。 它被转移到github，并改进了这样的意见，问题报告和贡献应该在那里 。

这种技术使用：

• <img>标签
• 一个无序列表：每个六边形包含在一个<li>标签和一个<a>标签中
• 转换旋转和歪斜，使六angular形形状
• overflow:hidden;
• nth-child()将六边形以常规模式进行分隔

更多的是用<img>标签创build六边形网格 。

六angular形网格特点：

• 网格是有响应的，因为它依赖于百分比宽度。 六边形使用填充底部技术保持其纵横比，并调整图像以适合六边形的形状。
• 对六边形的hover效果 ：文本在图像上以透明覆盖层滑动。
• 每个六边形都保持其边界：每个六边形的hover效果（或单击事件）只在实际形状内部触发。

完整的代码

以下片段不是网格的最新版本。 GitHub回购是维护和最新的。 问题和贡献可以在那里进行。

 * { margin: 0; padding: 0; } body { font-family: 'Open Sans', arial, sans-serif; background: rgb(123, 158, 158); } #hexGrid { overflow: hidden; width: 90%; margin: 0 auto; padding:0.707% 0; } #hexGrid:after { content: ""; display: block; clear: both; } .hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden; -webkit-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg); } .hex * { position: absolute; visibility: visible; } .hexIn { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* HEX CONTENT */ .hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; } .hex h1, .hex p { width: 90%; padding: 0 5%; background-color: #008080; background-color: rgba(0, 128, 128, 0.8); font-family: 'Raleway', sans-serif; -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; } .hex h1 { bottom: 110%; font-style: italic; font-weight: normal; font-size: 1.5em; padding-top: 100%; padding-bottom: 100%; } .hex h1:after { content: ''; display: block; position: absolute; bottom: -1px; left: 45%; width: 10%; text-align: center; z-index: 1; border-bottom: 2px solid #fff; } .hex p { padding-top: 50%; top: 110%; padding-bottom: 50%; } /* HOVER EFFECT */ .hexIn:hover h1 { bottom: 50%; padding-bottom: 10%; } .hexIn:hover p { top: 50%; padding-top: 10%; } /* SPACING AND SIZING */ @media (min-width:1201px) { .hex { width: 19.2%; /* = (100-4) / 5 */ padding-bottom: 22.170%; /* = width / sin(60deg) */ } .hex:nth-child(9n+6), .hex:nth-child(9n+7), .hex:nth-child(9n+8), .hex:nth-child(9n+9) { margin-top: -4.676%; margin-bottom: -4.676%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(9n+6):last-child, .hex:nth-child(9n+7):last-child, .hex:nth-child(9n+8):last-child, .hex:nth-child(9n+9):last-child { margin-bottom: 0; } .hex:nth-child(9n+6) { margin-left: 0.5%; clear: left; } .hex:nth-child(9n+10) { clear: left; } .hex:nth-child(9n+2), .hex:nth-child(9n+ 7) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(9n+3), .hex:nth-child(9n+4), .hex:nth-child(9n+8) { margin-right: 1%; } } @media (max-width: 1200px) and (min-width:901px) { .hex { width: 24.25%; /* = (100-3) / 4 */ padding-bottom: 28.001%; /* = width / sin(60deg) */ } .hex:nth-child(7n+5), .hex:nth-child(7n+6), .hex:nth-child(7n+7) { margin-top: -6.134%; margin-bottom: -6.134%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(7n+5):last-child, .hex:nth-child(7n+6):last-child, .hex:nth-child(7n+7):last-child { margin-bottom: 0; } .hex:nth-child(7n+2), .hex:nth-child(7n+6) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(7n+3) { margin-right: 1%; } .hex:nth-child(7n+8) { clear: left; } .hex:nth-child(7n+5) { clear: left; margin-left: 0.5%; } } @media (max-width: 900px) and (min-width:601px) { .hex { width: 32.666%; /* = (100-2) / 3 */ padding-bottom: 37.720%; /* = width / sin(60) */ } .hex:nth-child(5n+4), .hex:nth-child(5n+5) { margin-top: -8.564%; margin-bottom: -8.564%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(5n+4):last-child, .hex:nth-child(5n+5):last-child { margin-bottom: 0; } .hex:nth-child(5n+4) { margin-right: 1%; margin-left: 0.5%; } .hex:nth-child(5n+2) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(5n+6) { clear: left; } } @media (max-width: 600px) { .hex { width: 49.5%; /* = (100-1) / 2 */ padding-bottom: 57.158%; /* = width / sin(60) */ } .hex:nth-child(3n+3) { margin-top: -13.423%; margin-bottom: -13.423%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } .hex:nth-child(3n+3):last-child { margin-bottom: 0; } .hex:nth-child(3n+3) { margin-left: 0.5%; } .hex:nth-child(3n+2) { margin-left: 1%; } .hex:nth-child(3n+4) { clear: left; } } 

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'> <ul id="hexGrid"> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> </ul> 

Answer 2

好的，这是一个干净的，跨浏览器兼容的解决scheme，甚至可以让你蜂窝六边形：

为此，您需要将每个图像包装在两个容器中，因为一个将用于左上/右下截止，另一个用于右上/左下截止。

 <div class="outerclip"> <div class="innerclip"> <img src="http://img1.wikia.nocookie.net/__cb20090714124528/fireflyhttp://img.dovov.comthumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" /> </div> </div> 

然后，CSS给每个切割容器一个skew ，将angular度添加到图像：

 .outerclip { -webkit-transform: skew(-30deg); -ms-transform: skew(-30deg); -transform: skew(-30deg); overflow: hidden; display: inline-block; } .innerclip { -webkit-transform: skew(50deg); -ms-transform: skew(50deg); transform: skew(50deg); overflow: hidden; display: inline-block; } img { -webkit-transform: skew(-30deg); -ms-transform: skew(-30deg); transform: skew(-30deg); } 

演示： http : //jsfiddle.net/XkQtF/3/

注意：为了提高渲染质量，我build议给出.outerclip和.innerclip相同的固定高度。

为了得到蜂窝，你可以把几个图像放在一个row容器中，然后用下面的几个像素来抵消每个奇数行：

演示： http : //jsfiddle.net/XkQtF/4/

Answer 3

如果是关于蜂窝， 这里是一个CSS的可能性。 http://codepen.io/gc-nomade/pen/eyntg/

  <div><!-- even div gets a negative bottom margin. all of them gets a negative right margin --> <span><!-- skewed and rotated --> <img src="http://lorempixel.com/200/200/food/1"/><!-- rotated back, unskewed and rescaled --> </span> </div> 

Answer 4

您可以在% +伪元素中使用vertical-padding来绘制一个正方形。

然后，使用第二个元素来绘制一个蒙版。

DEMO

HTML

  <div class="hex"> <img src="image100x120"> </div> 

CSS

 <!--language:css--> .hex { position:relative; margin:auto; text-align:center; overflow:hidden; white-space:nowrap; display:table; } .hex:before { content:''; padding-top:120%; display:inline-block; vertical-align:middle; } .hex:after { content:''; position:absolute; top:0%; left:-10%; width:120%; padding-top:120%; transform: rotatex(45deg) rotate(45deg); text-align:center; box-shadow:0 0 0 200px white;; } .hex img { display:inline-block; vertical-align:middle; margin:0 -10px; } 

Answer 5

演示

HTML：

 <div class="hexagon"> <div class="contents"></div> </div> 

SASS（带指南针）：

 $width: 400px; $fillColor: #CCC; $height: $width*sin(60deg); .hexagon { display: inline-block; position: relative; width: $width; } .hexagon:before, .hexagon:after { content: ''; display: block; width: 50%; border: 0 solid transparent; } .hexagon:before { border-bottom-color: $fillColor; border-width: 0 $width/4 $height/2; } .hexagon:after { border-top-color: $fillColor; border-width: $height/2 $width/4 0; } .hexagon > .contents { position: absolute; top: 0; bottom: 0; left: 25%; right: 25%; } 

然后，如果要在六angular形中放置图像，则使用内容

 <img id="myimg" src="foo" /> 

举个例子，像这样：

 #myimg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 50%; } 

Answer 6

查看AngularJS实现的响应六边形网格。

HTML

 <div class="wrapper"> <section class="hex-grid"> <div ng-repeat="item in app.items" class="grid-item repeat-animation"> <div class="inner"> <div class="inner-inner" ng-style="{ 'background-image': 'url({{ item.imgSrc }})' }"> <a href="" class="grid-info"> <div class ="inner-text"> <div class="inner-text-inner"> <h2>{{ item.name }}</h2> <p>{{item.desc }}</p> </div><!-- /.inner-text-inner --> </div><!-- /.inner-text --> </a><!-- /.grid-info --> </div><!-- /.inner-inner --> </div><!-- /.inner --> </div><!-- /.grid-item --> </section><!-- /.hex-grid --> </div><!-- /.wrapper --> 

CSS：六边形网格

 .hex-grid { position: relative; width: 80%; left: 10%; padding-top: 120px; } @media (max-width: 767px) { .hex-grid { width: 100%; left: 0; } } .hex-grid .grid-item { position: relative; display: inline-block; float: left; overflow: hidden; visibility: hidden; -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); cursor: pointer; } @media (max-width: 633px) { .hex-grid .grid-item { width: 222%; margin: 0 -61%; margin-bottom: 10px; } } @media (min-width: 634px) and (max-width: 1022px) { .hex-grid .grid-item { width: 133%; margin: 0 -42%; margin-bottom: -25%; } .hex-grid .grid-item:nth-child(2), .hex-grid .grid-item:nth-child(4), .hex-grid .grid-item:nth-child(6), .hex-grid .grid-item:nth-child(8), .hex-grid .grid-item:nth-child(10), .hex-grid .grid-item:nth-child(12), .hex-grid .grid-item:nth-child(14), .hex-grid .grid-item:nth-child(16), .hex-grid .grid-item:nth-child(18), .hex-grid .grid-item:nth-child(20), .hex-grid .grid-item:nth-child(22), .hex-grid .grid-item:nth-child(24), .hex-grid .grid-item:nth-child(26), .hex-grid .grid-item:nth-child(28), .hex-grid .grid-item:nth-child(30) { margin-top: 28%; } .hex-grid .grid-item:nth-child(3), .hex-grid .grid-item:nth-child(5), .hex-grid .grid-item:nth-child(7), .hex-grid .grid-item:nth-child(9), .hex-grid .grid-item:nth-child(11), .hex-grid .grid-item:nth-child(13), .hex-grid .grid-item:nth-child(15), .hex-grid .grid-item:nth-child(17), .hex-grid .grid-item:nth-child(19), .hex-grid .grid-item:nth-child(21), .hex-grid .grid-item:nth-child(23), .hex-grid .grid-item:nth-child(25), .hex-grid .grid-item:nth-child(27), .hex-grid .grid-item:nth-child(29) { clear: left; } } @media (min-width: 1023px) and (max-width: 1599px) { .hex-grid .grid-item { width: 91.6%; margin: 0 -29.2%; margin-bottom: -17.5%; } .hex-grid .grid-item:nth-child(2), .hex-grid .grid-item:nth-child(5), .hex-grid .grid-item:nth-child(8), .hex-grid .grid-item:nth-child(11), .hex-grid .grid-item:nth-child(14), .hex-grid .grid-item:nth-child(17), .hex-grid .grid-item:nth-child(20), .hex-grid .grid-item:nth-child(23), .hex-grid .grid-item:nth-child(26), .hex-grid .grid-item:nth-child(29) { margin-top: 19%; } .hex-grid .grid-item:nth-child(4), .hex-grid .grid-item:nth-child(7), .hex-grid .grid-item:nth-child(10), .hex-grid .grid-item:nth-child(13), .hex-grid .grid-item:nth-child(16), .hex-grid .grid-item:nth-child(19), .hex-grid .grid-item:nth-child(22), .hex-grid .grid-item:nth-child(25), .hex-grid .grid-item:nth-child(28) { clear: left; } } @media (min-width: 1600px) { .hex-grid .grid-item { width: 66.7%; margin: 0 -20.9%; margin-bottom: -12.5%; } .hex-grid .grid-item:nth-child(2), .hex-grid .grid-item:nth-child(4), .hex-grid .grid-item:nth-child(6), .hex-grid .grid-item:nth-child(8), .hex-grid .grid-item:nth-child(10), .hex-grid .grid-item:nth-child(12), .hex-grid .grid-item:nth-child(14), .hex-grid .grid-item:nth-child(16), .hex-grid .grid-item:nth-child(18), .hex-grid .grid-item:nth-child(20), .hex-grid .grid-item:nth-child(22), .hex-grid .grid-item:nth-child(24), .hex-grid .grid-item:nth-child(26), .hex-grid .grid-item:nth-child(28), .hex-grid .grid-item:nth-child(30) { margin-top: 14%; } .hex-grid .grid-item:nth-child(5), .hex-grid .grid-item:nth-child(9), .hex-grid .grid-item:nth-child(13), .hex-grid .grid-item:nth-child(17), .hex-grid .grid-item:nth-child(21), .hex-grid .grid-item:nth-child(25), .hex-grid .grid-item:nth-child(29) { clear: left; } } .hex-grid .grid-item .inner { overflow: hidden; position: relative; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); } .hex-grid .grid-item .inner .inner-inner { -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform-style: preserve-3d; visibility: visible; overflow: hidden; width: 100%; padding-bottom: 40%; -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); background-repeat: no-repeat; background-size: 50%; -webkit-transition: all 0.35s ease-out; transition: all 0.35s ease-out; background-position: 50%; } @media (min-width: 1100px) { .hex-grid .grid-item .inner .inner-inner { padding-bottom: 40%; } } .hex-grid .grid-item .inner .inner-inner:hover { background-size: 60%; } .hex-grid .grid-item .inner .inner-inner .grid-info { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; padding: 10%; background: #ffffff; color: #000000; text-decoration: none; text-align: center; z-index: 2; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.35s; transition: all 0.35s; } .hex-grid .grid-item .inner .inner-inner .grid-info:hover { opacity: 1; filter: alpha(opacity=100); } .hex-grid .grid-item .inner .inner-inner .grid-info .inner-text { display: table; position: relative; height: 100%; width: 46%; left: 27%; } .hex-grid .grid-item .inner .inner-inner .grid-info .inner-text .inner-text-inner { display: table-cell; vertical-align: middle; } .hex-grid .grid-item .inner .inner-inner { -webkit-backface-visibility: hidden; } 

CSS：animation

 .repeat-animation.ng-enter-stagger, .repeat-animation.ng-leave-stagger, .repeat-animation.ng-move-stagger { /* 100ms will be applied between each sucessive enter operation */ -moz-transition-delay: 0.1s !important; -webkit-transition-delay: 0.1s !important; transition-delay: 0.1s !important; /* this is here to avoid accidental CSS inheritance */ -webkit-transition-duration: 0 !important; transition-duration: 0 !important; } .repeat-animation.ng-enter, .repeat-animation.ng-leave, .repeat-animation.ng-move { -moz-transition: 0.2s ease-in-out all; -webkit-transition: 0.2s ease-in-out all; transition: 0.2s ease-in-out all; } .repeat-animation.ng-leave.ng-leave-active, .repeat-animation.ng-enter, .repeat-animation.ng-move { -moz-transition: 0.2s ease-in-out all; -webkit-transition: 0.2s ease-in-out all; transition: 0.2s ease-in-out all; opacity:0; } .repeat-animation.ng-leave, .repeat-animation.ng-move.ng-move-active, .repeat-animation.ng-enter.ng-enter-active { opacity:1; } 

AngularJS

 'use strict'; (function() { /** * Declares the app module. */ angular .module( 'app', [ 'ngAnimate' ] ); //... 

原文： http : //rachidmrad.com/

所有的功劳都归Rachid Mrad先生所有，他是一个很棒的网页devise师。

https://github.com/mnishiguchi/hexagonal_grid

Answer 7

您可以创build一个透明的六angular形图像，并将其叠加在注入的图像上。

HTML：

 <div class="hexagon"> <!-- get the image --> <img src="injected.jpg" /> <!-- apply hexagon shape to it --> <img src="transparentHex.png" /> </div> 

CSS：

 .hexagon { position: relative; } .hexagon > img { position: absolute; } 

演示： http : //jsfiddle.net/dr6Hp/3/

Answer 8

而不是在img标签中使用class在容器img中使用css就好

 .container img{ your code} 

它会为你节省很多麻烦，把课堂放在图像上

Answer 9

试试这个FIDDLE

http://jsfiddle.net/ku860uoh/

 <div class="hex one"> <div class="images1"> <div class="images2"></div> </div> </div> <div class="hex two"> <div class="images1"> <div class="images2"></div> </div> </div> 

CSS

 BODY { background: url(http://placekitten.com/600/600); } .hex { overflow: hidden; visibility: hidden; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); cursor: pointer; } .images1{ overflow: hidden; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .images2{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50%; background-image: url(http://placekitten.com/238/240); visibility: visible; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .images2:hover { background-image: url(http://placekitten.com/440/242); } .one { width: 400px; height: 200px; margin: 0 0 0 -80px; } .two { width: 200px; height: 400px; margin: -80px 0 0 20px; }