6

六角形を作成する必要があり、それを完全な HTML と CSS にしたいのです。完全に対称ではないという事実を除いて、ほぼ完了です。左隅が右隅と揃っていません。現在のCSS:

.hexagon.outer {
    width: 318px;
    height: 452px;
    position: relative;
}
.hexagon.outer, .hexagon.outer:before, .hexagon.outer:after {
   background-repeat:no-repeat;
    background-color: #585858;
}
.hexagon.outer:before, .hexagon.outer:after {
    content: "";
    position: absolute;
    width: 262px;
    height: 262px;
    top:95px;
    -moz-transform: rotate(54.5deg) skew(22.5deg);
    -webkit-transform: rotate(54.5deg) skew(22.5deg);
    transform: rotate(54.5deg) skew(22.5deg);
}
.hexagon.outer:before {
    left: -130px;
}
.hexagon.outer:after {
    left: 186px;
}
.hexagon.outer span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 55px;
    background:#585858;
    z-index: 1;
}

.hexagon.inner {
    width: 276px;
    height: 372px;
    position: relative;
    margin:0 auto;
    top: 40px;
    z-index:4;

}
.hexagon.inner, .hexagon.inner:before, .hexagon.inner:after {
   background-repeat:no-repeat;
    background-color: white;
}
.hexagon.inner:before, .hexagon.inner:after {   
    content: "";
    padding:0;
    margin:0;
    position: absolute;
    width: 215px;
    height: 215px;
    top:79px;
    -moz-transform: rotate(54.5deg) skew(22.5deg);
    -webkit-transform: rotate(54.7deg) skew(22.5deg);
    transform: rotate(54.7deg) skew(22.5deg);
}

.hexagon.inner:before {
    left: -107px;
}
.hexagon.inner:after {
    left: 169px;
}
.hexagon.inner span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 55px;
    background:#585858;
    z-index: 1;
}

HTML:

<div class="hexagon outer">
   <div class="hexagon inner">

   </div>
</div>

例: http://jsfiddle.net/jK7sH/

外側の六角形は最終的に (背景) 効果を持ちます。そのため、2 つ (内側と外側) があります。

試行錯誤して並べてみましたが、 :before と :after の四角形が歪んでいるため、うまくいかないと思います。

境界線を使用せずにCSSだけで対称六角形を作成することは可能ですか?

すべての情報を事前にありがとう！

4

1 に答える 1

0

六角形は8面ですね。

背景の線形グラデーションhttp://dabblet.com/gist/5767212を試すことができ ます

それらにカーソルを合わせて、幅が増加するときにどのように反応するかを確認します.

于 2013-06-12T17:40:06.763 に答える