3

CSSを使用して六角形のパターンを作成する方法について、スタックオーバーフローの優れた答えを見つけました。

CSS3で繰り返し六角形パターンを生成する

六角形を反対方向に反転させたい場合を除いて、ほぼ完璧です（つまり、ポイントが一番上になります）。メインの16進divの幅/高さを交換することでこれをかなり簡単に行うことができました：（hexrow> div）...しかし、他のサポートするdivの背景画像を再調整するのに本当に苦労しています。私はしばらくの間それを理解しようとしてきましたが、あまり成功していません。

誰かがそれがどのように行われるかを示すjsFiddleを投稿する可能性がありますか？

これは私が現在いるところです：私が試したこと

..そして私はこれが私が修正する必要があるものだと信じています：

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 120% auto;
    bottom: 0;
    left: 0;
    z-index: 1;

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);

    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

どんな助けでも大歓迎です。

4

2 に答える 2

1

同じ行の奇数/偶数の六角形に異なるマージンを使用:nth-of-type(odd)して設定します。:nth-of-type(even)

または、マークアップを減らして、はるかに簡単な方法でそれを行うこともできます。その質問に対する私の答えと、私が行ったこのデモを確認してください。overflow: hiddenアイデアは、鋭角の菱形を取得するために要素（を持つ）に一連の変換を適用し、必要に60 degrees応じて、疑似要素または子要素に対して逆の順序ですべての変換を元に戻すことです。 （height要素自体と同じですが、.866は六角形の2つの平行な辺とその大きな対角線の間の距離の比率であるため.866、その要素のみです）実際に適用します。したがって、背景画像は1つの要素にのみ適用されるため、位置がずれる可能性はありません。widthbackground-image

基本的なHTML構造：

<div class='row'>
    <div class='hexagon'></div>
</div>
<div class='row'>
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!--
    --><div class='hexagon content longtext' data-content='Some longer text here.
       Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>

関連するCSS：

.row { margin: -8% 0%; text-align: center; }
.row:first-child { margin-top: 2.25%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 -1.5%;
    padding: 16%;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before {
    display: block;
    position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    right: 6.7%; bottom: 0; left: 6.7%; top: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg); /* 1.155 = 2/sqrt(3) */
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.row:first-child .hexagon:first-child:before {
    background-image: url(img.jpg); 
} 
/* and so on, add background images for all hexagons */
于 2013-01-19T16:36:24.883 に答える
0

ボーダーを使用しました。

Codepen.io

<div id="hex"></div>

と

#hex {
  display: inline-block;
  position: relative;
  width: 190px;
  height: 220px;
  background: no-repeat url("http://placekitten.com/200/300") 50% 50%;
}

div:before {

  content: " "; 
  display: block; 
  border-top: 0px solid transparent;
  border-bottom: 55px solid transparent;
  order-left: 95px solid white;
  border-right: 95px solid white;
}

div:after {

  content: " "; 
  display: block; 
  border-left: 95px solid white;
  border-top: 55px solid transparent;
  border-right: 95px solid white;
  margin-top:110px
}
于 2013-01-22T09:08:29.863 に答える