インターネットからウェブサイトに複数の画像を読み込みました。レスポンシブグリッドでこれらのすべての画像に六角形を与えることは可能ですか?
<div>
<img src="link" class="Image">
</div>
<div>
<img src="link" class="Image">
</div>
...
これを行うには複数の方法を見つけましたが、CSSコードで画像src
を埋める必要がありました。これは、jQueryを使用してWebサイトがインターネットからランダムに画像を読み込むため、背景画像を使用できません。
私はこれを試しました: http://jsfiddle.net/8f5m5wv0/
デモ および応答性のある六角形のグリッドのリポジトリです。 ここのコードは維持されていません。これはgithubに移動して改善されたため、コメント、問題の報告、および貢献を行う必要があります あり 。
この手法は以下を使用します。
<img>
_タグ<li>
_タグと_<a>
_タグに含まれていますoverflow:hidden;
_nth-child()
は、六角形を規則的なパターンで配置します_<img>
_タグを使用して六角形グリッドを作成します。
次のスニペットは、グリッドの最新バージョンではありません。 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>
_
グリッドは、1行あたりの六角形の数を、1200pxより広い画面の5から600pxより狭い画面の2までのビューポート幅に応じて調整します。
メディアクエリは必要ないが、行ごとの六角形の数を変更したいだけであれば、CSSを対応するメディアクエリから除外し、不要なクエリを削除できます。
詳細なカスタマイズについては、 六角形のサイズと間隔 を参照してください。
すべてのデモのリストについては、次のcodepenコレクションを参照してください。 応答性のある六角形のグリッド 行ごとの六角形の数、センタリングオプションなど...
元の codepen demo に_.pusher
_要素を使用して、六角形の不規則なグリッドを作成します。 _.pusher
_要素は、空の六角形のグリッドに「穴」を作るために使用されます。
さて、ここでは、六角形をハニカム化することさえ可能にする、クリーンでクロスブラウザ互換のソリューションです:
これを機能させるには、1つの画像を左上/右下のカットオフに使用し、もう1つを右上/左下のカットオフに使用するため、各画像を2つのコンテナにラップする必要があります。
<div class="outerclip">
<div class="innerclip">
<img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
</div>
</div>
次に、CSSは各カットオフコンテナーにskew
を与え、画像に角度を追加します。
.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/
注:レンダリングの品質を向上させるには、両方の.outerclip
および.innerclip
同じ固定高さ。
ハニカムを取得するには、いくつかの画像をrow
コンテナに入れて、次のように各奇数行を数ピクセル分オフセットします。
ハニカム構造の場合は、 ここに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>
vertical-padding
+擬似要素で%
を使用して、最初から正方形を描画できます。
次に、2番目の要素を使用してマスクを描画します。
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;
}
AngularJSで実装されているこのレスポンシブな六角形グリッドをご覧ください。
<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 -->
.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;
}
.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;
}
'use strict';
(function() {
/**
* Declares the app module.
*/
angular
.module( 'app', [ 'ngAnimate' ] );
//...
オリジナル:http://rachidmrad.com/
すべての功績は Mr。Rachid Mrad にあり、彼は素晴らしいWebデザイナーです。
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%;
}
次に、六角形に画像を配置する場合は、.contents
を使用します
<img id="myimg" src="foo" />
そして、例えば、次のようにスタイルします:
#myimg {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 50%;
}
透明な六角形の画像を作成し、注入された画像に重ね合わせることができます。
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;
}
このフィドルをお試しください
<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;
}
imgタグでクラスを使用する代わりに、コンテナimgでcssを使用します
.container img{ your code}
画像にクラスを配置する手間を省くことができます